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•• To be the most accessible and I 
inspiring voice for the industry, 
offering cutting-edge features 
and techniques vital to • 
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online content ff Billen 








CSS3 is the here, now and future of page styling. 


kay, okay, so maybe CSS3 isn’t 
exactly new, but it is certainly still 
fresh enough to be a catalyst for the 
cool new things designers are doing. 

Bundled tightly with HTML5, of 
course, we've split them apart this 
month to have a closer look at the 
styling techniques and popular visual 
effects. There are close to 30 superb tips and 
techniques to work through starting from page 36, then 
immediately we ramp things up with some complex 
CSS-based animation. From page 50 Sam Hampton- 
Smith shows how to build a kinetic motion element, 
which is sure to bring some space-age design to your 
headers or pages. Talking again of new stuff, we take a 
special preview look at Adobe CS6 on page 46 and ask 
a few questions about what the updates actually mean 


for the suite’s web-design credentials. Throw in the best 
of industry showcase SXSW covered in the news, plus a 
dose of CoffeeScript starting on page 78 and there 
really is something for everyone this issue. 

As an additional aside, this happens also to be my 
final issue at the Web Designer helm. I would therefore 
like to offer my sincere thanks for your support of the 
title over the years and naturally encourage you to stick 
with us for what promises to be an exciting time for the 
magazine as we approach an incredible milestone in 
magazine publishing - issue 200. I’m amazed at the way 
in which web design has evolved over the last seven 
years and today, with technologies like HTML5, jQuery 
and of course CSS3, there has never 
been a better time to fulfil our 
creative ambitions. 

Happy coding, folks! 




Game saved 
by OpCapita 


PS4 Orbis 


Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

A Steve Jenkins, Features Editor 

A Mark Billen. Editor D Mozilla 

BrowserQuest 

A Steven Mumby, Designer 
A Ben Martin. Sub Editor 


“The potential of CSS3 
Tl ’ is huge and we are only 
at the beginning" 


Airlock 


Word Press 
taxonomies 


Damien 
Hirst's Tate 
show 


CoffeeScript 


The Flash tax 


"Adding a charge for Flash developers " 
is hardly going to encourage more 
users to Adobe’s platform” 


“The release of CS6 has got the whole team 
buzzing. Steve J cannot wait to start using 
the fluid grid layouts in Dreamweaver" 


Adobe CS6 


welco me | 


Highlight 



f# We’re no longer 
restricted to 
creating websites, 
or restricting them 
to browsers... We 
can take advantage 
of the increasing 
number of devices 
in the market Si 

Chris Mair, strategy director 
at Airlock. Page 28 

Are you ready? 

i Bundled tightly 
withHTML5,of 
course, we’ve split 
them apart this 
month to have a 
closer look at the 
styling techniques 
and popular visual 
effects [of CSS3] if 
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conversation: 


I Join us on Facebook: 

* facebook.com/webdesignermag 
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Email the team: 


webdesigner@imagine-publishiiig.co.uk 
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Visit the website: 
www.webdesignermag.co.uk 
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Turn over to the contents to 
discover what’s going to get 
you excited this issue... 
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This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


* $ Use CSS3 to create 
popular visual effects 
that used to rely on 
Photoshop >® 



\ Louis Lazaris 


Louis is an author and front-end developer living in Toronto. Canada. He 
writes regularly for a number of top design blogs, including his own site. 
Impressive Webs (www.impressivewebs.com). In this month's cover 
feature he demonstrates how to use CSS3 to create popular visual effects 
that used to rely on Photoshop. Page 36 



Mark Shufflebottom 


Steve Jenkins 


Jeffrey Way 



Mark is an Adobe Education 
Leader and programme 
co-ordinator of BA (Hons) 
Interactive Media 
Production at Bournemouth 
University. This issue Mark 
starts a new series making 
an HTML5 game with the 
help of EaseIJS. Page 56 


Steve is Features Editor on 
Web Designer and has been 
creating websites since 1999. 
His interests include HTML. 
CSS and WordPress. This 
month he profiles Airlock, a 
big brand specialist with a 
'mobile-first' design 
philosophy Page 28 


t Jeffrey is a developer 

evangelist, instructor and 
author who works for 
Envato. This month he is 
demonstrating the art of 
cleaner code by using 
CoffeeScript to transform JS 
into something much more 
approachable. Page 78 



Adam Smith 


Sam Hampton-Smith 


Matt Gifford 



Adam transfers his skills 
from our sister magazine 
Advanced Photoshop 
(www.advancedphotoshop 
.co.uk) across to Web 
Designer, where he 
demonstrates how to make 
a single-page website work 
for you. Page 64 



A keen supporter of web 
standards. Sam loves getting 
the most out of HTML and 
CSS. You can follow his 
antics on Twitter via @ 
samhs. This issue Sam 
creates kinetic animations 
with CSS3. Page 50 



Matt is a lead RIA consultant 
developer who specialises in 
ColdFusion. Flash and AIR 
development. This issue he 
puts his vast industry 
experience into continuing 
his series on adding database 
functionality to apps using 
PhoneGap. Page 82 


Eric Freeman 


e Alongside Elisabeth Robson. 
Eric is co-author of the 
books Head First HTML & 
CSS and Head First HTML5 
Programming. A computer 
scientist and former CTO of 
Disney.com, this issue he 
builds Twitter widgets with 
Web Workers. Page 86 


Pete Simmons 


Pete is the digital marketing 
manager for Lionhead 
Studios and has over ten 
years’ experience in the 
videogame sector. This 
month he explains 
WordPress taxonomies and 
how to implement them 
into a live blog. Page 60 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 

Owebdesigner@imagine-publishing.co.uk O @WebDesignerMag © www.webdesignermag.co.uk 


Inside... 

16 Lightbox 

A trio of sites making the web a brighter place 
including Wrangler and the ALA design co-op 

24 Design diary: Toyota Camry 

Resn and Saatchi & Saatchi join forces to 
produce this automobiling tour de force 

28 Profile: Airlock 

Brand is king for this multi-award-winning 
enterprise based in London 

34 Blog beautiful 

A roundup of the best organic blogs around 

36 Cover: Master CSS3 effects 

Web pro Louis Lazaris guides you through all 
you need to know about CSS3 styling 

44 Design cloud 

24 websites that use CSS3 to best effect 

94 Portfolio 

Three more rising stars in the web world 

98 Trend map: Los Angeles 

La-La Land’s creativity goes beyond movies... 

100 Talent directory 

Find the perfect agency for the project at hand 

104 Hosting listings 

Check out the latest domain-based deals 

114 Style relic: MSN 

How the Microsoft mainstay has evolved 


<lieacler> 


Discussing the hottest topics 
from the web-design world 

8 SXSW2012 

Find out all the latest trends from one of the 
world's top web conferences in Texas 

10 Crowdsource 

We respond to your latest letters and tweets 

12 Comment: Jessica Butcher 

As Wi-Fi finally comes to the London 
Underground, what will it mean for the web? 

14 Comment: Paul Wilson 

What’s the secret to startup success? 






Design diary: Toyota Camry Lightbox: Michelberger Hotel 

A successful collaboration between two heavyweights Discover how this site captures the hotel’s spirit 


Trend map: Los Angeles 

Take a peek into the City of Angels’ web scene 


Pro file: Airlock 

Find out how a dishwasher secured Airlock’s URL 
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A comprehensive collection 
of free designer resources! 
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• 2 T-shirt templates 
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The final frontier Game on 

Re-create our Solar System with CSS3 Build your very own retro platformer 
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WP taxonomies 

A new approach to blog categories 

Web wor 
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One-page wonders 

Use a landing page to pull in viewers 


Re-creating the 
web’s hottest styles 

Master angular 
designs using 
CSS3 rotation 

Continue our CSS3 odyssey 
as Mark Shufflebottom shows 
us a new angle with www. 
infinite-imaginations.com 


74 Pixel-based styles 
in contemporary 
design explored 

Adam Smith is all about 
grid-focused layouts this 
issue as we examine 
pixelslave.com block by block 


<tutorials> 

Web gurus take you step-by-step 
through professional techniques 

50 Create your own kinetic 
animations with CSS3 

How to make an animated model of the Solar System 

56 Build an HTM L5 game with 
EaseIJS: parti 

Design an old-school platform game using Canvas 

60 Get to grips with taxonomies 
in your WordPress blogs 

Pete Simmons introduces taxonomies and how they 
can be used to reorganise content on your WP pages 

64 How to make a one-page website 
work using Photoshop 

Make every bit of space on a landing page earn its keep 

68 Create an eCommerce carousel 
with jQuery and XML 

Spice up your online shop with a jQuery content loop 


r .uieb. 

{developer; 

NEW! Dedicated 14-page section offering 
features and tutorials for coders 


Feature 

Wake up to CoffeeScript 

An in-depth guide to the language that filters all the 
best bits of JavaScript to get the perfect code blend 

82 App database support 
with PhoneGap: part 2 

Following on from last issue’s tutorial create a 
SQLite database to store and persist user data 

86 Create Twitter widgets with 
Web Workers 

With the web workers tasked with their roles it’s 
time to extract the data and put it to good use 
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Discussing the hottest topics in the web-design world 

If you have a creative project, new web product or great designer story, contact the editorial desk 

O webdesigner@imagine-publishing.co.uk O @WebDesignerMag 


Has SXSW lost it? 


Matt Wiggins joined the masses in Texas for the 2012 industry 
showcase and left excited - but with a hint of regret... 


XSW has become a monster. 

One of the resounding themes 
this year was that the 
conference has outgrown itself 
and has simply become too big. Opinion 
is divided: a bigger show brings bigger 
problems while the counterargument is 
that it creates new opportunities. We 
tend to fit into the latter category, but 
the recent explosion in the popularity of 
SXSW has undoubtedly created a little 
bit of both. This year was not only the 
largest in terms of attendance, it was the 
single largest increase from year to year 


on several fronts. A quick look at the 
figures reveals that 24,569 people 
registered for SXSW this year - up over 
27 per cent from last year. The number 
of mentions on Twitter jumped from 
314,946 to 503,778, a 60 per cent 
increase. (Check out bit.ly/GAySMc for 
charts and a more in-depth look at the 
numbers.) The number of panels 
submitted almost doubled in size with 
4,500 at SXSW, and the number of 
companies and sponsors were up 
significantly as well. So, how does this 
affect the average SXSW visitor? The size 


of the show has put a strain on the city 
of Austin itself, and finding the event of 
choice has become far more difficult 
than in previous years. On the flipside 
there are more brands, agencies, 
startups and industry professionals 
represented than ever before, leading to 


unprecedented networking 
opportunities. As a veteran of previous 
SXSW campaigns I thought it was time 
to give my view of the 2012 incarnation 
and get a take from a host of leading 
industry professionals on their thoughts 
and experiences (see opposite). 


The trade show seemed to 
be completely dominated by 
startup companies 
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Find news and feature items at ® www.webdesignermag.co.uk 


news 


For starters, the sheer number of 
events made it impossible to get a grip 
on what was happening, let alone see it. 
However, for the first couple of days, the 
bad weather provided a sense of 
community, bringing people together 
indoors. This created the ideal 
environment for discussions that might 
have never seen the light of day. As the 
weather improved so did our mood. 

To avoid the masses we tried out 
some of the restaurants outside of town. 
Salt Lick was touted as a must-visit 
venue, so we took the 30-minute 
journey to the outskirts of Austin. On 
arrival we were surprised to find that 
most of the crowd was made up of 
SXSW interactive folk. The food was 
great, the live music was great and this 
helped create a buzzing but laid-back 


atmosphere and environment. It was 
undoubtedly one of the highlights of the 
trip this year. There was no shortage of 
industry parties to attend either - who 
needs technology? And at almost any 
point throughout the day. you could find 
something going on. The top of our list 
this year was definitely the Saatchi & 
Saatchi pool party. 

This year's trade show was slightly 
different. Aside from the regulars 
(sponsors), it seemed to be completely 
dominated by startup enterprises. There 
really were some great new companies 
with some impressive ideas, but we 
found it strange that no major browsers 
or platforms were represented. This was 
a stark change from last year, which saw 
the likes of Google. Opera. Microsoft and 
Word Press to name a few. Almost every 



major agency was in town, but they 
seemed to avoid the trade show and be 
content with just throwing a party. 

The final day saw the red carpet party 
and comedy duo Gabe & Jenny who 
were excellent. Media Temple put 
together another awesome closing 
party at the legendary Stubb's 
BBQ. But it was almost 
impossible to get in there if you 
didn't show up early - and it 
holds over 2.000 people! 

So. it seems that SXSW was 
exposed to mixed reviews this 
year. What does that mean for 
you? Negativity is bad for your 
brains; we say keep a PMA and 
realise that SXSW is becoming 
exactly what we all want it to be 
the mainstream, an industry 


standard gathering for folks who do 
what we do. There is no question that 
the benefits of growth have outweighed 
the problems. So it’s time to adjust to the 
growth and tame the monster, and get 
ready for an exciting SXSW 2013. 


<industry opinion> 


SXSW brings the industry and creatives together. We get the lowdown on SXSW 2012 from those on the floor 


"This year had an enormous agency presence. Definitely a tipping point in the 
convergence of traditional and interactive production. I wish i could have divided 
myself into a few people because there were always multiple places I wanted to be at 
the same time. We felt fortunate, as there was a lot of buzz surrounding the 
companies that we represent this year. B-Reel announced its Products division and 
demoed its mind controlled slow race car driving (which you can see here: bit.ly/ 
yQjlzH). while Tool of North America’s TAKE THIS LOLLIPOP won best of show at the 
SXSW Interactive Awards" 

Charlie McBrearty, CEO at Shortlist (Representing Tool of NA, winners in 
Best of Show and in the Experimental category for Take This Lollipop - www. 
takethislollipop.com, and winners in the Motion Graphics category for 
Lights - lights.elliegoulding.com) 


"It was exciting to work on a project that wasn’t for a ‘brand’. It was something 
different. To have had the opportunity to create a campaign from the ground up for 
something that carried real historical and scientific importance was awesome. I’m 
glad to have had the opportunity, and I’m glad the judges at SXSW decided to give us 
some hardware honouring that work." 

Dave Snyder, creative director at Firstborn (winner in the Classic category 
for Expedition Titanic - bit.ly/hLvqHf) 


"This was my first time at SXSW, and I chose not to attend the actual conference. 
Many people had mentioned that the breadth of it emerges in the after-parties. That 
sounded great to me. I mostly met up with old and new friends for free drinks and 
music, however I was able to hear about the conference from various attendees. 

“It struck me as odd, but many designers weren’t mentioning awe-inspiring talks 
or mind-blowing workshops, but rather a well-known industry legend who only 
talked about himself and came off very poorly with attendees. There's a valuable 
lesson in there somewhere.” 

Morgan Knutson, Ul designer at Google (currently designing the Photos 
experience on Google*) 


“I saw a lot of transmedia consideration. There were thoughts around launching a 
game and TV series in tandem where events from one inform the other. This also 
touches on the broader UX theme of considering more (or all) touch points with a 
user - even the offline ones. Responsive layouts and native apps vs mobile web 
were all the rage. That mostly boiled down to considerations of context, budget, 
task, and a few others. Grid systems have been in. but I saw a great talk on how a 
grid is a good guideline, but doesn't guarantee clean design.” 

Tony Walt, director of 3D and Motion Design at EffectiveUI (finalists in 
the Motion Graphics category for US Navy Blue Angels - www.blueangels. 
navy.mil) 



“I saw more shovel-ready and built innovation from panels on government than I 
did from any led by ad agency folks. They’ve long cut the ribbon and are building 
the future, while we’re still fighting over what colour to paint the damn hard hats.” 

Ryan Harms, director of Digital Production at Arnold 



"In my opinion there has been a fundamental shift in focus for the conference. 
Responsive interfaces, development techniques and best practices have been all 
but replaced by social commerce and startup accelerators. While there are still 
some heavy hitters for the Keynote speeches, the panels are generally targeted 
at content providers, bloggers, and deck builders eager to scratch together 
venture capital. The parties are dominated by service companies and startups 
looking to be the next SXSW break-out app. Ad agencies are sending armies of 
producers to recruit both vendors and employees. 

“All in all, SXSWi is still a great place to get together with peers and friends to 
discuss the market and trending patterns from users and clients alike. The 
networking potential is off the charts. In the end. it is still the largest and most 
relevant gathering of designers and developers going. My biggest question is. 
how long will companies continue to invest the time and money to pull their 
brightest minds off of production and send them to a week-long networking 
event? Hopefully at least one more year.” 

Matt FaJohn, partner at Legwork (finalist in the Business category for Diesel 
Denim 2011 - diesel.legworkstudio.com and in the Music category for ‘The 
Gamits - This Shell’ - www.thisshell.com) 
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Your emails, tweets, forum comments. The social network but in print 

This month were pleased to announce Web Designer is now available on Android, plus discussing WordPress, Flash and Illustrator 



*feeo* s 1 


subject Web Designer teams up with Zinio 

Front Markus Myllyoja 


Photoshop has its place, but 
don’t forget Illustrator II 


version of the creative’s choice for any 
platform. It doesn’t matter if you want to read 
on an iPad, Android tablet, desktop or 
smartphone - they’re all available. Check out 
the latest issue of Web Designer at gb.zinio. 
com/webdesignerissue, or if you want a 
digital subscription sign up at gb.zinio. 
com/webdesignersub. 

If you prefer a print version with a 
resource-packed disc, then visit the 
Imagine Shop at bit.ly/mVaKBU. iT 


subject Web Designer 
-makmgmyday 

From John Tedesco 


I was thrilled when I saw you 
published my question about 
using Illustrator to mock up 
websites, and Web Designer's 
response verified the uniqueness 
of my process. 

Thanks for ‘making my day’, 

I’m having a lot of fun with this! 

It was a pleasure, and it seems 
your letter has stirred up a 
response with Web Designer 
readers giving the Illustrator 
option a thumbs-up; see letter 
below, for instance... 

sm^d Illustrator; the 
mockup king? 

From Daniel Jeffery 


I’ve just read John Tedesco’s 
letter in Web Designer magazine 
(issue 194) about mockups in 
Illustrator and I’m definitely with 


I have noticed that you can buy Web Designer 
from the Newsstand, but I am a Linux user living 
in Finland. I don’t really like paper magazines any 
more. I am thinking of buying Web Designer for 
tablet, but probably not the iPad. Is there a way to 
order an eMagazine that can be used on other 
devices, like my laptop? And is there a DVD or 
something extra if I order the print version? 


Web Designer has teamed up with Zinio to 
ensure everybody can get the latest digital 


John on this 

issue. Being an Illustrator 
fanboy myself, when starting any 
project (either for web or print) I 
always fire up Illustrator and 
create my layout, templates or 
illustrations using this particular 
piece of Adobe software. 

Why? Well, because most 
projects involve some kind of 
logo tweaking or redesign which 
Illustrator is great at achieving. 
Also, there are other great 
features like Live Color for 
producing different colour 
combinations of your designs 
with just a few clicks - and then 
there are multiple artboards, Live 
Trace, perspective grids... The list 
is almost endless. 

Photoshop has its place in the 
design world, of that there is no 
doubt, but don’t forget its cool 
vector-based brother - Illustrator. 

I for one would certainly like to 
know a little bit more about the 
process John uses, as he 
mentioned in his letter. 


Web 

Designer 

tutorials 

Discover the latest 
techniques to help 
create inspirational 
and interactive 
webpages 


Subject 


. vordFress is 
best for me? 


From Stephanie Gage 


OR 


Go FOR IT-parti, 
Google+ 

www.webdesignermag.co.uk/ 

blog/go-for-it-part-l-google 


GO FOR IT-part 2, 
Facebook 

www.webdesignermag.co.uk/ 

blog/go-for-it2 


GO FOR IT-part 3, 
Twitter 

www.webdesignermag.co.uk/ 

blog/go-for-it-part-3-twitter 


WordPress seems to be the web 
publishing platform of choice for 
web designers, but I have yet to 
indulge. I have noticed that there 
are two options available: the 
WordPress hosted site via 
WordPress.com and a version 
you install yourself. Which one is 
best, cheapest, safest etc? I can’t 
make up my mind so hopefully 
Web Designer can do it for me! 

Both are powerful platforms 
and there is little to choose 
from between the two. A 
WordPress-hosted site is a 
good option for those who just 
want a site to work - it takes 
minutes to get online and there 
are no hosting costs. However, 
users are restricted on web 
space and can do little to 
customise the site. If you want 
greater customisation and 
flexibility, the self-hosted site is 
a better option. Also, watch out 
for our next issue where we 
take an in-depth look at 
keeping WordPress secure. 
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Comment on the news and opinion ® www.webdesignermag.co.uk 
Email the editorial team at O webdesigner@imagine-publishing.co.uk 


It seems that Illustrator 
undoubtedly has a place in the 
mock-up process, according to 
John and Daniel. But, surely 
Photoshop is just as good, if not 
better? If you have an opinion 
on this and anything else let us 
know at webdesigner@ 
imagine-publishing.co.uk. 


subject Flash is not 
finished 

From Steven McCullagh 


Personally. I disagree with the 
idea that Flash is a platform that 
is slowly disappearing - my 
opinion is that its role is changing. 
There are still a number of 
advantages to using Flash over 
competing technologies when 
attempting particular tasks. 


Flash has been pushed out of 
the limelight by the surge in 
popularity of HTML, CSS and 
jQuery, the technologies that 
web designers have been 
concentrating their efforts on. 
And there is no doubt that 
Apple’s decision not to support 
Flash on its devices was key to 
the downturn in interest in the 
platform. However, while 
designers and developers are 
looking at ways to create for iOS 
without Flash, there are still 
plenty of areas in which the 
medium is still very well 
supported. This means that 
designers shouldn’t completely 
forget Flash and kiss it goodbye 
forever; just take a look at what 
it can do, what it can do well and 
what it can do that others can’t. 






Comments from the Blog 

Web Designer is always keen to 
hear from its readers, followers 
and visitors. Here we bring 
together a specially selected collection 
from the last month 

Response from the winners of the Web 
Designer BIG book giveaway: 

Jonathan Chute said: 

OMG! Sad, but this is the first competition I have ever won! 
Books have arrived, but need to pick them up:) can’t wait 
to go get them. Congrats to the rest and thanks, Web 

Designer! 

Tor Harrington said: 

I am totally chuffed and surprised, finally won something, 
this has made my day for sure, many thanks A _* 

Matt Wilding said: 

Nice one - I won! And it’s my birthday today - how great is 
that? Many thanks:) 


ANDROID MAGAZINE 

There are over 100 million Android-powered phones and tablets 
around the world, and currently over 300,000 apps to choose 
from on the Google Play store. Android Magazine is the only 
publication dedicated solely to this increasingly popular platform. 
The magazine gets under the skin of the OS. and offers a host of 
step-by-step tutorials and features on how to use. hack and 
improve any Android device. The latest issue looks at the 
complete guide to tablets, and much more, and is on sale now. 
www.littlegreenrobot.co.uk 
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Jessica is CMO and co-founder of 
Blippar. A serial entrepreneur, she 
worked at travel startup isango.com 
before becoming head of business 
development in EME A for 
alibaba.com. In 2010 she set 
up Integritour, a tourism 
company in Kenya. 


Jessica Butcher 


Taking Wi-Fi on the Tube will unleash this booming technology’s potential 


I t’s finally happening: after years of complaining, the London 
Underground system is getting Wi-Fi. The solution isn't perfect 
and comes laden with caveats: the Wi-Fi will only be available in 
80 stations in the centre of the capital; it won’t be available on the 
trains themselves; and after the Olympics are over anyone who isn't 
a Virgin Media customer will have to pay to use it. But. for all of this. 
I’m sure most of us would agree that it’s better than nothing. 

It’ll definitely help reduce the tedium of waiting on platforms 
when there are delays on the line. And there will certainly be a 
frisson of excitement, at least in the early days, from being able to 
catch up with news from the world above ground, or watch the 
football highlights, or check if your train home is running on time. 

But from my point of view the most fascinating impact of Wi-Fi on 
the Tube - and the one with the most significant long-term 
implications - will be on advertising. 

We’ve already seen underground ads change a lot in the past 
decade. First there were the digital screens installed at some of the 
biggest commuter stations, like Liverpool Street. More recently, 
projectors have beamed TV-style ads on platform walls. 

But putting Wi-Fi on Tube platforms throughout 80 of the busiest 
stations will be the biggest revolution of all. because it massively 
enhances the power and potential of technologies like image 
recognition and augmented reality. 

Augmented reality has started to become a more regular feature of 
outdoor and press advertising over the past year. At Blippar we’ve 
worked with major brands like Nike, Tesco and Sony to add an extra 
element to their traditional ads. We're reaching a point where people are 
familiar with the concept of pointing their smartphone at an ad to get a 
load of extra information or content instantly. That could be the location 
of their nearest shop, or a discount code, or behind-the-scenes video. 

And it’s not just brands - newspapers and magazines have been 
getting in on the act too. Publishers can make use of augmented 
reality technology to empower their customers to buy products 
reviewed or advertised in their pages, just through a couple of 


touches on a smartphone screen. There’s the potential for this to be 
a much-needed new revenue stream for print publishers as the 
technology becomes more widely adopted. 

But none of these things worked underground before. Thanks to 
the Wi-Fi deployment on the Tube they can - and in one of the most 
competitive advertising markets in the world. That’s a huge boost to 
the growing augmented reality industry - which the UK leads the 
world in, by the way - and it’s a chance for advertisers and brands to 
come up with entirely new ways to get commuters’ attention at a 
time when they’re bored and looking to be entertained. 

The smart brands out there will start to think about how they can 
make the most of that captive audience. Campaigns already include 
games you can play on your phone, video clips or text that gives 
people something extra to look at and read. There’s incredible 
potential to engage commuters, sell to them, or give them marketing 
messages that influence their next purchase. 

To date augmented reality has mostly been the domain of big 
national or global brands, because they’re a bit more prepared to 
experiment with their marketing. But Wi-Fi on the Tube should open 
up this technology to a bigger consumer audience and therefore a 
wider set of advertisers. I’d expect to see a lot of new brands, big and 
small, experimenting with its potential over the next couple of years. 

There’s lots of talk at the moment about ways to boost the 
economy, and inevitably people disagree about the best way to 
achieve growth and create more jobs. In my view, technological 
improvements like this are among the simplest but most effective 
solutions. Once you make the technology available, people will find 
ways of using it - and smart people will turn those opportunities into 
new jobs and businesses. That’s the history of the internet over the 
past 15 years, after all - from search engines to blogging to apps. 

That’s why I think this is such an exciting development and one 
that’s likely to turbo-charge our nascent industry. There’s a long way 
to go, but taking our technology underground should kick-start a 
whole new growth phase. 


Putting Wi-Fi on the Tube massively enhances the power 
and potential of technologies like augmented reality 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 

Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 

Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the clock. 


Voucher missing? 


Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 




£50.00* free advertising credit 

with Google AdWords for your business. 


No minimum term or commitment. 

Offer only available to businesses in the UK. 


Don't miss out - try it today 

We're offering £50.00* free Google AdWords 
advertising credit for business users**. There's 
no obligation to continue - you're in control. 

To start attracting new customers today: 



Visit google.co.uk/ads/start 


S, 


Or call 0800 169 0478 *** 


***Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone 
or call from abroad. 

**Terms and conditions apply. Promotional credit can only be used for AdWords accounts that are less than 14 days old by advertisers with 
a billing address in the UK. Advertisers will be charged for advertising that exceeds the promotional credit. Advertisers will need to suspend 
their ads if they do not wish to receive additional charges beyond the free credit amount. Offer subject to ad approval, valid registration and 
acceptance of the Google AdWords Programme standard terms and conditions. The promotional credit is non-transferable and may not be 
sold or bartered. In some cases, advertisers who choose prepay billing may be subject to a £10 minimum prepayment before their account is 
activated. Any such prepay amount will be credited to Advertiser's account once account is activated. One promotional credit per customer. 
For full terms and conditions please visit http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated 
under the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, 
Ireland. Copyright 2012. Google and Google AdWords are trademarks of Google Inc. and are registered in the US and other countries. 


Google 









No customers? Build your startup so they will come. 


A re you a budding entrepreneur? Maybe you are a 
designer who wants the inside track on the latest ideas 
exciting your clients? In this piece, I aim to reveal the 
secrets of the lean startup methods that are revolutionising the way 
startups are managed and funded across the globe. 

The story of the lean startup movement began in 2004 when Eric 
Ries co-founded the 3D social network IMVU (www.imvu.com). 
Following six months of intense work he finally launched, but was 
worried about what customers and the press would say about 
buggy code, inconsistent design and a patchy interface. He needn't 
have worried - he had no customers. He built it, but no one came. 

In the coming months he worked hard to bring in customers, 
adding new features and fixing the bugs. Eventually he started 
talking to the few customers he had and then he started listening. 
Ries discovered that his initial market assumptions were all wrong, 
so he started again. In lean startup terms, IMVU 'pivoted'. 

The pivot was successful. The company started attracting 
customers, and eventually It grew into a multi-million dollar success 
story. At the time though, Ries and his partners realised that, contrary 
to popular wisdom, the pivot should have occurred earlier and more 
cheaply. They approached the rebirth and growth of IMVU by 
challenging conventional thinking to develop a structured and 
rigorous management style customised to the highly uncertain 
environment of a startup. It was out of this experience that the lean 
startup movement was born. 

At heart, lean startups are about validated learning, which is an 
application of the scientific method to business ideas. The 
methodology is simple: 

Identify your assumptions about your product and the 
marketplace; these are your hypotheses 
Run experiments to invalidate or validate each hypothesis, 
preferably in isolation 

Repeat until you have a validated set of hypotheses 
Build on your validated hypotheses. 

In the world of lean startup, these experiments are called the 
minimum viable product (MVP): 


Minimum: remember we are dealing with an assumption 
that has not been validated. We need feedback and focus. 
Viable: it still needs to work and not repel the potential 
market. What is minimum and viable will depend on your 
market. James McBennett of Fabsie, which uses 3D printing 
to make customised furniture, says: “Our early market is 
designers and the design-conscious. These people will 
never look at you again if you use the wrong font.” 

Product: to have confidence in your validation, the MVP 
needs to be something real. If you aim to sell a product, 
paying customers are your only true validation. 

It's easy to fool ourselves about how minimal an MVP needs to be. It 
almost certainly needs less design, coding, and features than you 
think. Nick Swinmurn of Zappos validated his hypothesis that there 
was demand for online shoe sales, by making a webpage showing 
shoes for sale in his local shops. He went back to the shops and paid 
full price when his customers bought them from his site. 

The lean startup approach calls for rapid change, short feedback 
cycles and constant iteration. The traditional 'waterfall' method of 
design and development is not going to cut it. Every day of 
development is expensive, and every feature (or hypothesis) that 
has not been tested in front of real users is a liability. 

The agile method of development has successfully reduced the 
amount of debt acquired when programming features. Product 
design, however, has typically remained a ‘waterfall'-based field. User 
experience designers will receive a brief and create a detailed 
specification that lays out how it should work. Visual and interaction 
designers will detail the specifics of how it should look and behave. 

Producing these detailed specifications and pixel-perfect 
mockups risks the success of the product on a series of invalidated 
hypotheses. Every hour spent elaborating on an idea that itself 
hasn't been tested is potentially a wasted hour. The software design 
community needs to embrace change and learn, as developers 
have, to break their work down into smaller testable chunks. 

Lean startups are about building a thriving business in a highly 
uncertain environment. Designers need to change the way they 
work to fit into this radical new way of doing business. 
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Everything you need to work 
better online from Fast hosts 

That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, hosted 
email or online backup. It’s award-winning 
technology you can depend on. 

The awards tell you that you’ll get the performance 
your business needs to work better online. They also 
tell you that businesses of all sizes succeed with our 
technology. You might not be an enterprise, but you can 
benefit from enterprise-level technology at Fasthosts. 

Plus, with up to 70% off* selected products 
there’s no better time to buy. 

Find out how your business can work better online 

call free on 0800 6520 444 
or visit www.fasthosts.co.uk 


fasthosts 



hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


£• 2012 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts internet Ltd. 
•offer subject to a minimum 12 month contract. Terms & Conditions apply, see website for details. 



Michelberger Hotel 

www.michelbergerhotel.com 

DeveloimienUechiiologics Flash, XHTML, HTML, CSS. SWFAddress library, JavaScript, 

ActionScript, jQuery library 



Designer PlcUltcIgG 

www.plantage.de 


Strong illustration is coupled with current animation 
techniques to deliver a visually rich experience 


uilt over a period of four 
months, the 

Michelberger Hotel 
'space oddity’ site is a 
tour de force of 
illustration coupled with 
subtle animation. Based 
on the illustrations of art 
director Azar Kazimir, 
developer Lukas 
Sommer outlines his 
approach to the site's design. 

"We aimed to create a charming, 
entertaining and silly website that 
reflected the quirky, informal and 
alternative nature of the hotel. And that 
would appeal to the type of guest we 
thought would most appreciate 
it. Azar's drawing of the rocket was the 
starting point, which was then taken 
apart, optimised for animation and 
enriched with new flying elements 
inside and around.” 



••••••••••••••••••a 




The handmade feel of the site is 
completely deliberate, as the designers 
were not looking for a slick finish for the 
site, as this would not be in keeping 
with the client's brief. 

Sommer continues: “The different 
SWFAddress Events are registered in 
the Flash layer and trigger the specific 
animation events if a certain navigation 
point is accessed on the HTML layer. 
The Flash layer also triggers different 
JavaScript functions to define whether 
content is shown or not. Both content 
layers communicate through JavaScript 
and ActionScript. The jQuery library 
works as a base for all the content 
animation in the HTML layer.” 

Flash animation may not be the 
most fashionable platform right now, 
but this site revels in its capabilities. The 
interactive nature of the site ensures 
that the viewer becomes engaged with 
the animation, lodging it in the memory. 


#1 We aimed to create a charming, 
entertaining and silly website that reflected 
the hotel’s quirky and informal nature IP i 



<Above> 

• The rich illustrations that the site is based on 
perfectly complement the informal and 
alternative nature of the hotel 



#08B4EC #000000 


abcABC 

123456789 

<Above> 

• The site uses a hand-created font by Azar 
Kazimir, as well as the standard Courier New 
designed by Adrian Frutiger and Howard Kettler 
from Monotype Imaging 
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<Above> 

• The site’s real star is the illustrations by Azar 
Kazimir. The detail is superb and even more 
astonishing when animated 



<llottoiu right, clockwise> 

• Take control of the rocket ship hotel 
via the remote control. This site 
makes you interact with its contents 

• The incredible detail built into the 
animation outside and inside the 
hotel mesmerises the viewer 

• Graphical components outside of 
the hotel give the site its kinetic feel 
that keeps the eye roaming 

• Using the remote control you can 
open an image viewer and even 
watch full-motion video embedded 
within the site 


lightbox 


17 







Know a site that deserves to grace these pages? Tweet us now ^ @webdesignermag 


ALA 

ala.ch 

Development technologies HTML, CSS. JavaScript, Photoshop 



Designer Ala Ramildi and Rene Keller 

ala.ch 

As a showcase for their work, ALA's site is visually rich 
and easily accessible by prospective clients 


sing the ever popular 
scroll technique. ALA’s 

•••••• 

site was designed to 
deliver an efficient yet 
engaging experience for 
the user. Photography 
and bold pixel art greet 
the viewer on arrival. The 
first screen gives an 
insight into the studio 
itself before inviting the 
visitor to sample some of ALA’s work. 

“Our main competences are screen 
design, concept and illustration, which 
are all visual disciplines.” says Rene 
Keller. "Hence it was clear from the 
beginning of the process that the site's 
main goal must be to showcase visual 
material. We decided to simplify the 
whole concept but include more 
surprising gadgets. In terms of 
simplifying we came to the conclusion 


that the fastest way to check our 
portfolio is just scrolling.” 

The site is also not simply a static 
representation of the studio’s output. It 
was important to offer interactivity, and 
also a level of animation within each 
stratum of the site as the visitors scroll 
through the pages. The time spent fine 
tuning the site via a prototype stage 
certainly paid off, with a Ul that clearly 
defines the design sensibilities of ALA. 

Keller concludes: “In terms of design 
we think the combination of visual 
design and interactive behaviour is 
quite special. This is even if many one- 
page-scrollers have popped up during 
the last few months. In terms of content 
we always wanted to be authentic and 
show our work and the studio as it is. 
According to the feedback and 
recognition we received so far, it looks 
like the product matches our intention.” 


•# In terms of design we think that the 
combination of visual design and 
interactive behaviour is quite special i# 



<Above> 

• The choice of complementary colours, clean 
typography and a sense of balance make the ALA 
site attractive and engaging 



#DCDBD6 #E87F03 #168FC8 



#83714D #FFE301 #DB2A7C 



<Above> 

• ALA has not forgotten their roots starting out as 
pixel art jockies. The online game Energy Coach 
illustrates their prowess in this medium 


18 


lightbox 



































































UGHT$ 



Das machen wir so arbcitcn wir 


Wir realisieren 

massgeschneidertc, innovative 
Webprojekte. 


ICON COLLECTION 


Icons from miscellaneous projects we 
worked on in the last couple of yean. 


We've been entrusted with the SCRUM 
Dis ion of ‘s corporate website and tile 
creation of the ICON SIT. 


<lUght> 

• One of the two main fonts on the site is Copse by 
Dan Rhatigan that is available from Font Squirrel 


abcABC 1234S6 


<llight> 

• The second distressed font in use is Matiz by 
Beycan Cetin. also available from Font Squirrel 


abcABC 12345 


<Riglit> 

• The simple yet 
highly effective use 
of the page scroll 
technique gives 
easy access to 
ALA’S portfolio 



<Above> 

• Illustration meets technical development at ALA. 
The studio is adept at responsive screen design 
and high-end illustration and concepts 



<Abovc> 

• The ALA site also clearly indicates that the 
designers love character illustrations. The current 
site highlights several of their creations 
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Know a site that deserves to grace these pages? Tweet us now 5 @webdesignermag 




<Left> 

• The site doesn't 
forget it's about the 
Wrangler brand. You 
can view each outfit 
before or after playing 
with gravity 



<Left> 

• You are invited to 
drag the anchor within 
the image to create a 
vertigo-inducing 
visual effect 
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<Above> 

• Each transition is divided with a short 
full-motion video excerpt that is fast 
moving and dynamic 



#B8BCB6 #3E4F59 #181818 



#312A23 #4A2A2B #B1A293 


<Left> 

• The window transitions are handled 
brilliantly with each model falling 
seamlessly into the next scene 


Wrangler Europe 

www.wrangler-europe.com 

Development technologies HTML. Photoshop, Abobe After Effects. Rotoscoping 



Designer Stink Digital 

stinkdigital.com 

Strong brand awareness mixes with state-of-the-art 
video direction to deliver a compelling user 
experience that will 'get your edge back’ 


•••••••• •••••• 


••••••••••••• 


ideo may now be a vital 
component of all high-end brand 
websites, but few have been able 
to innovate in this space with any 
truly engaging content. Wrangler 
has been using video for some 
time. Approaching Stink Digital, 
the brand wanted a visually rich 
experience on its site, yet allow 
their brand advocates to play. 

At first glance the Wrangler 
Europe site seems to offer only conventional 
video material. However, once the site has 
loaded the fun begins. Stink Digital explains: 
"We shot the video with one of our directors. 
Arno Salters, and then posted the video and all 
the transitions in-house. We created assets 


with a high number of frames which allowed 
the user to slowly scrub the film backwards 
and forwards without seeing any unclean 
jumps in the image." 

It’s the use of page transitions that make 
this site stand out and offer the viewer a visual 
experience that is unique. The whole site is 
built around the video content which is a 
masterclass that all designers can learn from. 

The immersive feeling that the viewer gets 
is testament to the designers’ technical skill as 
Stink continues: “In order to integrate the look 
and feel of the film into the site, we replicated 
physical behaviour on the Ul elements. This 
required a lot of testing and general tweaking 
between the development and FX team to 
make sure we got it right." 


#• The whole site is built around the video 
content which is a masterclass that all 
designers can learn from •• 


lightbox 
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I Resn, Saatchi & Saatchi LA / Toyota Camry Effect 



Design diary 

Ride the development cycle ^ 



|ncq Che.eth. 


Matt Bilson, 


[technical director 


Jonathan Hawke, 


ATCHI & 


exec producer 


28S2SJSa5BS*t 


Project. - 

WW w.toyota 

Company I Resn, Saatchi & Saatchi - 
Web I wwwjesnxoJB 


S=5 


With social media well and truly in 
the mainstream, Toyota opted to 
make proud customers and 
owners the stars of the new online 
home for the Camry range 

Somewhat unashamedly, we here on Design 
diary have a real penchant for featuring 
some of the biggest names in the business. 

Well, this month we haven’t got just one huge 
name but three, with super-talented digital 
agency Resn teaming up with advertising 
experts Saatchi & Saatchi to bring an exciting 
web presence to car manufacturer Toyota. The 
site forms a hub for an ambitious Camry Effect 
marketing campaign, that has encompassed a 
Shazam-based competition linked to a 
'Connections’ TV commercial aired during 
February’s Super Bowl. 

“When SSLA first contacted Resn with a 
note, 'Remember how crazy our last job 
together was [referring to the Sponsafier 
series]? Well, this one is even crazier. Wanna do 
it?’, we knew we were in for a fun ride!” 

From the off that 'craziness’ was formed 
around the idea of building what amounts to a 
social network around Camry drivers, then 
rendering their thoughts and perceptions of 
the brand in an engaging way. “With over 30 
years of production and nearly 9 million cars 
produced there are millions of drivers out 
there. We set out to capture their stories." 

We hear from both the creative teams 
involved in bringing the project to fruition and 
experience the challenges from concept 
through to completion. 
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TWO shots showing compositional ^ 

elemehtsfortheFlashcollage.witha _ 

multicoloured map diagr 
signifying the various screen 


Who would have thought\ 
in this age that a load of ] 
pins and sticky notes J 
< could be so useful? S 
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| Resn, Saatchi & Saatc:hi LA / Toyota Cam ry Effect 




A closely collaborative effort was 
pivotal in communicating visual 
ideas, graphical references, mood 
boards and style guides for the 
front-end look 


These shots show 
how initial 
black-and-white 
concept illustrations 
might progress to 
form full-colour 
scenes and provide 
a more colourful 
. backdrop J 



Resn: “Playing ball with the Saatchi LA crew 
was fast paced, free-flowing and freakin’ fun. 

The team at the LA office kicked off 
proceedings with an intensive two-day 
design-athon which resulted in some awesome 
direction and a clear vision for the Resnators to 
go back and forth with. A tweak here and a 
nudge there resulted in what we have today, 
pure Camryness bliss." 

SSLA: "Once we had our concept established 
we began to pull inspirations and visual 
references - everything from colour palettes, 
typefaces, photography styles, textures, icons, 
illustrations and 3D graphics to mixed-media 
collages. Mood boards were created from 
select references and we began to dive into 
our own visual explorations. We had a very 
close collaboration with Resn right from the 
very beginning. We. at Saatchi. would take an 
initial stab at the layout, then pass it over to 
Resn as our day came to an end. They would 
then take our files and put their own spin on it, 
pushing the visuals in a new direction and then 
pass it back. This ‘tennis’ approach went back 
and forth for many, many rounds until we 
landed on a direction that pleased us all - 
including the clients. 

"We wanted the environments to feel 
premium and comprehensive - personalised to 
each specific user. With this style in mind, we 
turned to Melbourne, Australia’s Qube 
Konstrukt. They were an amazing partner who 
understood our vision and had the skills to pull 
it off. They created a mix of computer¬ 
generated 3D images as well as physical, 
miniature, handmade models that filled our rich 
visual landscapes. 

“It was a truly global collaboration and 
everyone involved brought a unique talent to 
the table, creating a very successful end 
product that we are all proud of.” 
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#i The challenge was to ensure the 
— backend was as fast as possible 

The heavtty user-driven conceptfor the atacoupled with 
somelntenseaudlence pressure, ensured thatrthad to 

work in a robust way 

Resn: “There were many challenges in bringing the 
project to life. First, we prototyped a few different 
approaches for dynamically generating the collage of 
3D assets until we arrived at a solution which ensured 
a great composition every time. 

■Many hours were also spent developing a system 
to manage the vast amount of interweaving paths, 
questions and complexities that the question decision 
tree offered; a system and process that, once nailed, 
saved us many headaches. 
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On top of this was the challenge of ensuring that the 
site's backend was as fast and responsive as possible; 
with the huge Super Bowl audience (on top of the 9 
million Camry owners) visiting the site and generating 
data, we needed to process their responses and convert 
them into statistics incredibly quickly. 

We. along with our back-end partners, gave a lot of 
attention to this in order to ensure that users 
experienced a live, continually updating site that 
reflected the community minute-by-minute. 
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Several home page mockups 
were created, each offering a 
different perspective . 
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SSLA: “Camry is not like Prius, Jeep or Porsche who 
have an existing close-knit community. When Camry 
drivers pull up to a light, they don’t wave to each other 
We needed to find a way to reach them and create 
awareness - fast. The initial marketing plan included 
targeted Facebook engagement ads and polls, a smart 
digital media buy. a whole host of strategic media 
partnerships, a web video to explain what the Camry 
Effect was, plus messaging on all of our social channels 
including Twitter, Facebook and YouTube. We also 
activated our dealer network of over 1,200 national 
dealers to get the word out to existing Camry owners. 

"The next phase of the campaign was comprised of 
two Super Bowl spots, four real-life documentaries and a 



unique expandable timeline built in Flash that allowed 
users to interact and expand the film from a 60-second 
spot to a 14-minute short film. We also partnered with 
Shazam to pull off the first-ever car giveaway done with 
the music identification app, giving away two brand-new 
2012 Camrys. The results have been pretty epic. Nearly 
65,000 people created Effects in under a week and our 
campaign has garnered over 460,000,000 earned 
media impressions to date. Our Shazamable Super Bowl 
spot broke the record for most digital engagements in 
the company’s history. We had over 710,000 visits to the 
site the week of the Super Bowl and TIME magazine 
named our TV spot in the top five Super Bowl ads for 
2012. In the real world, interest in Camry spiked nearly 


800 per cent and new sales leads jumped by 19 per cent. 
Camry is well on its way to becoming the most reviewed 
car on the planet. 

Resn: “The initial launch of the good ship Camry Effect 
was quite a while ago now. Since then, the Effect (as we 
affectionately call it) has motored through dealer and 
regional manager reports and widgets; additional social 
networks integration; a creation method and new 
questions for non-Camry owners; a whole new 
homepage structure and a mobile version of the site for 
Android and iPhones - to become the careering beast we 
saw plough through the 2012 Super Bowl half-time show.” 
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Web Designer heads to W14 to talk to big brand specialist 
Airlock about creative campaigns, its mobile-first design 
approach and how a dishwasher secured its domain name 


who Airlock wliat Creative digital agency, a part of Leo Burnett London, a Publicis Groupe company 
whore Warwick Building, Kensington Village, Avonmore Road, London W14 8HQ web airlock.com 
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irlock is a multi-award- 
winning creative and 
strategic digital agency 
that was founded as a 
place for ideas to meet 
technology. Today, its 
core proposition is as a 
digital engagement 
specialist. The company 
creates digital content and services that 
drive audiences to its clients. 

It has an in-depth understanding of how 
different audiences consume media across 
a range of platforms, and it creates content 
solutions that integrate within consumers’ 
digital lives accordingly. 

Airlock’s principal outputs are digital 
brand strategy, content design and 
development - across all digital channels - 
and online marketing campaigns, which 
broadly fall into three service areas: 
strategy, creative and technical. 

Founded by Will Lebens (managing 
director), Charlie Martin (creative director) 
and Joseph Denne (technical director), 


Chris Mair joined the management team as 
strategy director from Diesel HQ in 2005 
where he was head of digital strategy. 

Over the last decade Airlock has worked 
with many of the world’s most recognised 
brands including Virgin, Burberry, BMW, 
Nokia, Diesel, Renault and Heineken. More 
recently Airlock has established itself as a 
specialist in the broadcast sector, having 
developed a number of high-profile digital 
and multi-platform projects, including the 
Emmy Award-winning and BAFTA- 
nominated Battlefront, BBC 2’s Maestro, the 
Webby-nominated and Sony Radio Award¬ 
winning World on the Move, the global 
digital presence for cult TV show Top Gear 
and the BAFTA-nominated Life Begins. 

Airlock started life in 2001 as an online 
advertising agency, as it used to call itself 
back in the day. It had a lot of brand 
experience, some big ideas and had built a 
proprietary video ad delivery system. 
Airlock began creating campaigns for 
companies like Ford, Disney and Levi’s 
which were looking to innovate through 
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Airlock timeline 

Established 2001 

Founders Will Lebens, Charlie Martin, 
Joseph Denne 


2001 


The‘video box’ 
Airlock produced for 
Fanta was one of its 
earliest innovations. 


Number of 
employees 



'Work Hard’ was one of 
the first campaigns it 
produced for Diesel. 
Many more followed. 


2003 


Number of 
employees 



2005 



Motorola on Tour was its I 
first foray into web design, [ 
providing a few accolades | 
for the company. I 



It worked with Burberry on 
many projects, including the 
Icon Collection launch 
campaign. 


2007 


Airlock worked on a 
project called lOff to 
relaunch the BMW 1 
Series in the UK. 




2006 


Agencies that continually deliver great 
work will be recognised for doing so 


creative tech. As its client relationships developed, it 
became interested in users’ relationships with content 
beyond campaigns. Airlock built communities and 
adopted a more strategic bent. That evolved again 
when it started working with broadcasters like the 
BBC, which helped the company to understand the 
role of digital in the broadcast model, in turn forcing it 
to consider how this deeper content could be carved 
up and distributed. Now, it is seeing successful brands 
behave like broadcasters. This puts Airlock in the 
enviable position of a company that’s well placed to 
advise brands on how to learn from the broadcast 
model and create compelling content. 


Airlock started out its online life as theairlock.com. 
The managing director. Will Lebens, reveals the 
incongruous switch to the current URL. “The Airlock 
name came from the concept of merging ideas and 
technology in a single place. For the first five years we 
settled for theairlock.com as our URL, keeping a 
close eye on the dormant airlock.com. Then in 2006, 
after years of attempted contact, we got an email 
from a strange Canadian chap informing us that we 
could have the domain if we shipped him a top-of-the- 
range Miele dishwasher over to Canada. So we did. 
The whole thing cost us a little over £500, which is 
pretty good value for a single-word TLD.” 


Keeping busy is crucial to the success of any 
agency. Airlock strategy director, Chris Mair, explains 
that an active agency often has a poor site due to 
focusing the majority of its creative genius on outside 
projects. “It is often said that the best agencies have 
the poorest websites, for the simple reason that good 
agencies have little time to spend on their own 
website as they are too busy creating awesome work 
for their clients. In some ways this is true. Agencies 
that continually deliver great work will be recognised 
for doing so and it’s that which they’ll be remembered 
for, not how nice their website is. That said it is very 
important that you practise what you preach, and 
there aren’t really any excuses these days for websites 
that go completely against the grain. We’re actually 
going through a redesign process of airlock.com at 
the moment, to make it a much better experience 
across mobile and tablet platforms. If only there were 
more hours in the day.” 
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Number of 
employees 


It produced the information 
architecture and design of 
the original ITV Player. 


Number of 
employees 


It was the main UK agency for 
Heineken for several years 
working on various 
advertising campaigns and 
product launches. 


It picked up its second 
international Emmy Award 
for the work it did on 
Battlefront for Channel 4. 


Airlock is presently 
about to launch a 
landmark project 
for Renault TV. 


The Airlock team have a wealth of experience with 
most of them boasting over a decade in the business. 
Mair breaks down how work is delegated. “The core 
team at Airlock is currently around 20 people. Of 
these the breakdown is roughly a third tech, a third 
creative and a third strategy and client-facing project 
teams. We have a very senior team at Airlock. Most 
people within Airlock have been working in the 
industry for over ten years now. As such we are quite 
strategic in our approach; we tend to do most of the 
thinking, planning and experimentation within our 
four walls. And we often work with any number of 
specialist production teams to bring our ideas to 
life. We have good relations with over 30 different 
studios around the world.” 

An agency is powered by clients. Mair gives an 
insight to the process of attracting new leads. “We get 
new clients through three main channels: word-of- 
mouth and other referrals; through clients finding us; 


and by us approaching them. They are all important 
channels and over the years they have all delivered 
some very good new business to us. We approach 
each channel differently. Regarding referrals, the key 
thing is to continue to deliver great work for people 
and to get on well with them. It’s as simple as that. Do 
this, they’ll recommend you to anyone and the new 
leads will soon be flooding in. 

“In terms of clients finding you there are many 
things you should be doing. PR, entering awards, 
blogging, speaking at events, etc, the more self¬ 
promotion you do, the more you’ll be found. And in 
terms of finding clients, we have a list of brands we’d 
love to work with who we contact intermittently with 
stuff we think will interest them. Sometimes it works, 
more often it doesn’t. Rejection hurts, but keep 
plugging away. It’ll pay off one day.” 

Big brands are part of the Airlock DNA, but it’s not 
all about the better-known brands as Lebens explains. 


“Like a lot of agencies, we have to be selective with 
our engagements, but we make the decision based 
on the opportunity we believe is being presented 
rather than the type of organisation. Sometimes a 
small project opens a client up to your way of thinking 
and leads to much larger opportunities, which is the 
way it worked with Diesel. Or sometimes the business 
objective is so compelling that we can’t resist the 
challenge - like www.topgear.com. Because we love 
new challenges, we almost never deem something 
off limits due to the required output.” 

Different projects require different personnel. Mair 
offers an insight into how Airlock tackles a project. 
“Project timelines vary massively depending on a 
number of factors, including the scope of the project, 
its complexity, client capability and many other 
things. There is no set timescale a project takes to 
complete, as we work on so many different types of 
projects. Last year, for example, we delivered a huge 
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industry insight 


Joseph Denne, 
technical director, 
Airlock 


** JavaScript has had 
something of a revolution over 
the past few years. The sheer 
number of frameworks has 
allowed much more 
sophisticated solutions to be 
built. While other technologies 
exist, JavaScript is still the de 
facto language to use 99 
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WEB ._.....airlock.com 


FOUNDERS .Will Lebens, managing director 

Charlie Martin, creative director 
Joseph Denne, technical director 
Chris Mair, strategy director 


YEAR FOUNDED ___2001 

CURRENT EMPLOYEES ....35 

LOCATION __London, UK 


SERVICES 


> Digital brand strategy 

> Creative development 

> Digital content production 
- websites, apps, mobile, etc 

> Social media marketing 

> Content management 


project for BBC Worldwide, which took the best 
part of a year; and this week we kicked off a 
different project for the BBC lasting three weeks. 
We have a fairly robust project process to follow, 
regardless of the type of project we’re working 
on. A project manager will typically be involved 
throughout, and others will be brought in at 
different stages depending on what’s required” 

The right tool for the job is a key factor in the 
project process. Mair reveals the tools that make 
an Airlock project tick. “Projects begin life as 
prototypes, done on paper as rough sketches in 
red and black pen. Next stage is formal 
information architecture, which is done using 
OmniGraffle. When it comes to design, we mainly 
use Adobe - most of our work is produced using 
Photoshop or Illustrator. From a build perspective 
we are very much an open-source agency. We are 
huge advocates of Symphony CMS, an open- 
source XSLT content management system. In our 
opinion it’s the best CMS on the market and we 
use it across nearly every project we undertake.” 

With a project completed it needs to make its 
way to the client. “Typically the last couple of 
weeks of most projects is a QA period, whereby 


the work we’re delivering will be tested 
extensively by a number of people. The client is 
normally involved at this stage also, so there is 
rarely a big ‘reveal’ moment, more a gradual 
introduction that they’re a part of. In terms of 
aftercare, as a part of our standard terms we offer 
a warranty period where we’ll fix most things. 
After that we have a number of different support 
contracts that we offer. Most of our clients 
continue to work with us to some extent after the 
initial projects go live.” 

HTML5, CSS3 and jQuery are the technologies 
that will build the next generation of websites. 
Airlock’s technical director, Joseph Denne, shares 
his thoughts on the apps of the moment. “HTML5 
itself has become much larger than previous 
versions. It has introduced many different APIs 
that allow the development of projects that are 
much wider in scope than before. 

“We’re no longer restricted to creating 
websites, or restricting them to browsers for that 
matter. We can take advantage of the increasing 
number of devices that are appearing on the 
market, and the features they offer and can treat 
websites more like applications, or indeed build 
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Responsive design is <pr<> cue> 

our baseline - everything ; Alrlock I 
we produce for the web is 
built in this way - * 


applications removing the need to call them websites. 
The proliferation of mobile devices has introduced 
technologies that HTML5 can take advantage of, such 
as GPS, hardware acceleration (for video, gaming, etc) 
and even local databases. We can even go as far as 
creating iOS and Android applications with it. As an 
agency, being able to take advantage of the above 
allows for a much more sophisticated experience to 
be designed and crafted. 

“CSS3 has removed many of the design restrictions 
we’ve experienced in the past. In turn, this allows 
designs to be more engaging and also more reactive 
to user input. Moreover, it allows the transfer of design 
assets to be moved into code as opposed to files, such 
as gradients, rounded corners and drop-shadows. 

“JavaScript has had something of a revolution over 
the past few years. The sheer number of frameworks 
has allowed much more sophisticated solutions to be 
built. While other technologies exist, JavaScript is still 
the de facto language to use. 

“When combined, all of the above innovations 
allow the production of truly engaging experiences 
by removing some of the restrictions that existed 
before, and introducing new methods of delivering 
content. We no longer have to treat ‘websites’ as sites 
and no longer have to use the page paradigm. Instead 
we can approach them as experiences that can exist 
and behave in a much different way than before.” 

Mobile is now a key consideration in the design 
process. Denne explains how Airlock approaches the 
small screen and beyond. “Our position is best 
described as ‘mobile first’. We consider devices and 
context as part of the planning at the head of a project, 
understanding that users are no longer wed to the 
desktop. Responsive design is our baseline - 
everything we produce for the web is built in this way, 
with a greater or lesser focus on bespoke functionality 
being applied depending on the requirements of the 
audience at hand.” 

Beautifully built websites need to be seen. Denne 
tells us how they use a dedicated team to drive traffic. 
“Natural search remains a significant traffic driver, but 
it is no longer the only consideration. 

“There is a variety of methods we deploy to get the 
word out, but the key traffic driver is igniting 
conversation - generally through a combination of 
content planning, PR, blogger outreach and a 
dedicated seeding team. Our approach tends to be 
led by the projects we’re working on. For example on 
Battlefront for Channel 4 we hired a dedicated team 
of three to produce and manage content across the 
web: an editor, whose role it was to oversee the 
production of all digital content; and two seeders, 
who together managed the distribution of related 
content across over 1,500 different websites, blogs 
and social network groups. The combined result was 
a huge amount of conversation about Battlefront and 
many people linking to the main hub site we created.” 
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Organic blogs 

This issue we take six blogs that offer illustrative and more natural elements to 




Amy Mahon 

www.amymahon.com 

Development platform WordPress 

A bright welcoming retro header image accompanied 
by a perky and engaging navigation bar instantly sets 
the tone for this blog. In essence the site is simplistic 
and almost minimalist in its approach, but it is the 
complementary colours, attention to detail, effective 
fonts and well-placed images that create the ambience 
of a relaxing and engaging online reading experience. 


Jason Holland Design 

blog.jasonhollanddesign.com 

Development platform WordPress 

This blog adopts a simple but engaging layout that 
complements illustrative elements and organic 
textures. The colour palette is subtle with a 
distinctive logo that uses shades of blue to stand out 
from the surrounding elements. The blog is neatly 
finished with a footer that adopts darker tones of the 
background and cute illustrative characters. 


Thunder Chunky 

www.thunderchunky.co.uk 

Development platform WordPress 

Thunder Chunky uses WordPress to get new content to 
the masses. However, it doesn’t conform to the standard 
blog layout, preferring to integrate blog content into a 
more imaginative page presence. A predominant bright 
pink and white colour selection is neatly enhanced by the 
use of grey text. To complete the Thunder Chunky style, a 
host of illustrations provides the visuals. 


34 


blogbeautiful 




































































<blog boautiful> 

Organic blogs | 


seen^rsuggesl Tweet a 140 with your blog’s address directly to % @webdesignermag 
a theme Email your suggestions to ft webdesigner@imagine-publishing.co.uk 

complement the content and create a reading experience that grows on you 



¥ISKY*iB 

Vinftgr fi/ls 


ev 








The Fat Smack blog populates the page with simple primary 
colours to create a legible reading experience fi 


Albinal 

www.albinal.com/wp/blog 

Development plat form Word Press 

The dark illustrative self-promotional background is 
perfectly supported by the bright and colourful 
header. These two elements combine to set the tone 
for the focal point of the blog: the content. The 
Individual posts are equally measured and fit neatly, 
all accompanied by a complementary image that 
does a great job of adding another dimension. 


Fat Smack 

fatsmack.org/blog 

Development platform Word Press 

The Fat Smack blog uses white as its background canvas 
and populates the page with simple primary colours to 
create a legible reading experience with a dash of 
creativity. The logo sets the scene while the layout 
continues the theme. The fonts are crisp and clean, and 
the images are focused and sharp allowing the reader to 
concentrate on the site's core purpose. 


Vicky’s Vintage Gifts 

www.vickysvintagegifts.co.uk 

Development platform WordPress 

Old-fashioned gifts are the key component here and 
all the visual elements are strictly related to the retro 
theme. A canvas backdrop, vintage paper textures, 
embroidered badges and photo borders all add to 
the authenticity The layout installs all the essential 
elements including an image slider, background 
textures and our favourite: the image-based sidebar. 
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EFFECTS 

CAN CSS3 REALLY DELIVER THE CONTEMPORARY 
STYLING TECHNIQUES WE ALL CRAVE? WEB DESIGNER 
LOUIS LAZARIS PRESENTS A COLLECTION OF 
PRACTICAL TIPS FOR APPLYING POPULAR VISUAL 
TRICKS THAT NO LONGER RELY ON PHOTOSHOP 


C SS, or Cascading Style 
Sheets to quote its full 
name, is a language we 
as web designers take 
very much for granted 
these days. It is a 
standard that, despite 
being inextricably 
linked to HTML, exists 
purely to separate the 
presentation layer from 
the content. With it we 
enjoy far greater levels of 
control over how the various browser¬ 
rendering engines display our pages, 
favouring a more semantic approach to 
applying aesthetic rules. With the 
introduction of CSS3 and the various 
enhancements implied, these rendering 
powers have been significantly boosted 
to handle a range of exciting cosmetic 
effects. More and more the new 


specification seems to be taking the 
burden away from the <img> tag and the 
deployment of image-editing tools like 
Photoshop (and others) to create a richer 
visual experience. 

To celebrate the wider possibilities, 
we’ve decided to do a CS53 reboot of a 
feature we did way back in issue 151 of 
Web Designer - this time refining it by 
distilling it down to 25 top tricks and tips. 
Popular techniques spanning drop 
shadows, backgrounds, transparency, 
text, gradients and borders have been 
brought together with some quick hints 
and tools that are so vital to your modern 
lexicon of style. 

By following the code and screenshot 
examples, you should not only get a 
better idea of how CSS3 can deliver that 
next level of presentation but also feel 
confident enough to apply these trendy 
techniques to future projects. 




kk CSS3 GIVES US 
FAR GREATER 
CONTROLOVER HOW 
BROWSERS AND 
THEIR RENDERING 
ENGINES DISPLAY 
OUR PAGES! » 








TRANSPARENCY 


Transparency settings via CSS have been 
around for some time, and even Internet 
Explorer has made way for transparency 
using non-standard filters. But CSS3 expands 
on our options by adding RGBA colours to the 
well-known opacity property. 

No need for images or any complex scripts, 
as we can apply an alpha transparency value 
to any element on the page. 

If our webpage has a textured or coloured 
background, and we want the background to 
show through a semi-transparent version of 
that image, we don't need to bring the image 
into our image editor to achieve this. We just 
use the following CSS: 

001 img { 

002 opacity: .6; 

003 } 


Using CSS3’s Opacity property, we've set the 
element to be 60% opaque (or 40% 
transparent if you’re a glass-half-empty kind of 
person). The Opacity property accepts any 
decimal value between zero and one, with 
zero representing full transparency. 

Two other options available to you for 
creating semi-transparent elements on your 
page are by means of utilising either RGBA or 
HSLA colours. When you are defining colours 
using these particular methods, you have the 
ability to add an alpha setting on the defined 
colour. Here is one particular example of the 
alpha setting being added: 

001 .example { 

002 background-color: rgba(255, 

96, 0, 0.6); 

003 } 


This is the same orange colour used as a 
background for our image, except this time it's 
set using RGB along with an alpha channel. 
Finally, the same colour can be defined using 
the following syntax: 

001 .example { 

002 background-color: hsla(23, 

100%, 50%, 0.6); 

003 } 

This time we’ve used CSS3’s HSLA colour 
syntax. HSLA stands for Hue, Saturation and 
Lightness. The first value in the hsIaO function 
takes a number from zero to 359 (defining the 
colour hue). The next two values are per cent 
values representing the amount of saturation 
and lightness for the chosen hue. And the last 
is an Opacity setting. 


k k ADDING ROUNDED CORNERS TO AN HTML ELEMENT HAS 
TRADITIONALLY DEEN ANYTHING BUT TRIVIAL 9 9 
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ROUNDED CORNERS ON BOXES 
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DROP SHADOWS ON TEXT 


As is the case with many design techniques, adding rounded 
corners to an HTML element has traditionally been anything 
but trivial. Extra markup, bloated scripts, sliced images and 
other less-than-optimal methods have all at some time been 
used to achieve rounded corners. 

But CSS3’s border-radius property makes those old-school 
solutions obsolete. Here's the syntax: 

001 .example { 

002 border-radius: 40px; 

003 } 

Including this code will add a 40px radius to each of the corners 
on the affected element. 

The example code above is the shorthand notation, and is 
the simplest and most common way to use border-radius. 
However there are several other quick tips for using this 
property, a few of which we've included below: 

• With longhand, you are able to define a different radius value 
for each corner 

• You can create an ellipse by increasing the radius values 

• Fluid elliptical shapes can be created by setting the border 
radius to 50px for all corners 

• You can set different vertical and horizontal radius values on 
a single corner using the slash-based syntax (for a detailed 
explanation of this, see this article: bit.ly/oOmmj4). 


In years past, drop shadows were impossible without the use of images or some kind of incredibly 
complex scripting or proprietary code. We’re going to add some simple CSS3 to create a drop 
shadow on a heading element. 

001 hi { 

002 text-shadow: #999 2px 2px 4px; 

003 } 

Now our text has some subtle visual depth added, and this is accomplished with no images, no 
JavaScript, and only a single line of CSS. 

So how does this piece of code work? Well, this new property accepts four values. The first value is 
a colour value. In our example we're using #999, which is a light grey. This can be any valid CSS3 
colour value, including an RGBA or HSLA value that incorporates an alpha transparency setting. 

The next two values represent horizontal and vertical offsets. In our example, 2px is just enough to 
give us the effect we're after. The last value is an optional blur radius setting, which we’ve set at 4px to 
keep our shadow from appearing overly sharp. 


Adding a drop 
shadow can make 
your text leap out 
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BOX SHADOWS & GLOW EFFECTS 




CSS3 allows us to add a shadow to virtually any 
element on the page using the box-shadow 
property. This is done with pure CSS with no 
need for cumbersome images or scripts. But 
CSS3 expands on our options by adding RGBA 
colours to the well-known opacity property. 

Here’s how the CSS3 code looks when we want to 
create a simple box-shadow: 

001 .shadow { 

002 box-shadow: #aaa 2px 2px 20px 
5px; 

003 } 

The syntax is quite similar to that of text-shadow, 
with two key differences. We have the option to 
include a spread distance (5px in our example) 
and an optional inset keyword (not included in 
our example) to put the box-shadow on the inner 
part of the element. 

But box-shadows can be used to create more 
than just customary shadows. Because you're 
permitted to change the colour (and opacity if 
you use RGBA or HSLA) of the shadow, you can 
create some neat effects. Let's try to make an 
outer glow effect, and we’ll apply the glow to an 
element that appears on a dark background. 

Here’s the code: 

001 .shadow { 

002 box-shadow: #f0ff66 0 0 30px 8px; 
003 } 

Here we've set our shadow colour to a light yellow 
shade, removed any offsets, and we’re using a 
relatively high blur radius setting along with a 
moderate spread distance. Depending on the 
design and the context of the box, you could 
fiddle with these values until you get your glow 
looking just right. 


BOX SHADOW 


How the humble box-shadow effect would look to 
the viewer in a supporting browser 



This one will go down well with most web users... 


Tooltips are another element that have 
always required JavaScript. While you may still 
need a fallback option for older browsers, 
modern browsers let us create tooltips using 
pseudo-elements along with an HTML attribute. 
So let’s say we have the following HTML: 

001 <p>Lorem ipsum dolor sit amet <a 
href="#" data-tooltip=”This is a pure 
CSS tooltip">hover over this link</a> 
elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua ut enim 
ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.</p> 

This paragraph of text has a link with a data- 
tooltip attribute, which is an HTML5 data 
attribute (see bit.ly/4AbRRY). We can use this 
attribute to serve up our tooltip. 


001 

a:link { 

002 

position: relative; 

003 

text-decoration: none; 

004 

border-bottom: solid lpx; 

005 

006 

} 

007 

a:before { 

008 

content: 

009 

position: absolute; 

010 

border-top: 20px solid #0090ff; 

011 

border-left: 30px solid 
transparent; 

012 

border-right: 30px solid 
transparent; 

013 

display: none; 

014 

top: -18px; 

015 

left: -26px; 

016 

017 

} 

018 

a:after { 

019 

content: attr(data-tooltip); 

020 

position: absolute; 

021 

color: white; 

022 

top: -35px; 

023 

left: -26px; 

024 

background: #0090ff; 

025 

padding: 5px 15px; 

026 

-webkit-border-radius: 10px; 

027 

-moz-border-radius: 10px; 


028 border-radius: 10px; 

029 white-space: nowrap; 

030 display: none; 

031 } 

032 

033 a:hover:after, a:hover:before { 

034 display: block; 

035 } 

We’re relatively positioning every link element 
to create context for absolutely positioned child 
elements. We remove the link underlining, and 
add a bottom border to mimic it. This is to avoid 
the underline appearing on the tooltip. 

Next we create two pseudo-elements that 
will appear on hover. The :before pseudo¬ 
element will make a triangle shape using pure 
CSS. This will form the bottom of our tooltip. 

The after pseudo-element forms the main 
part of the tooltip. It has rounded corners using 
border-radius, along with some other aesthetic 
properties. But the most important part of this 
element is the value for the content property. 
Instead of a customary value in quotes, or a 
commonly used empty string, were using the 
attrO function, which allows us to grab any 
attribute value from the element we’re targeting 
(in this case, the link). 

As a side point here, we could use the title 
attribute, which would seem to fit this purpose 
well, but then we would have more than one 
tooltip appearing on hover, potentially causing 
readability and usability problems. 

The only other parts of the code that you 
should take note of are the top and left 
properties, which position the tooltip relative to 
the link. In this case, we’re using pixel values, and 
we’re focusing the positioning on the top-left 
corner of the link. For your own project, you 
may need to adjust the positioning depending 
on the size of the text, or other factors. 


This is a pure CSS tooltip 


amet hover over this link elit, sed d 
bore et dolore magna aliqua ut emr 
exercitation ullamco laboris nisi ut a 

Our pure CSS tooltip in mid-hover action 


k k CSS3 EXPANDS ON OUR OPTIONS 
BY ADDING RGBA COLOURS TO THE 
WELL-KNOWN OPACITY PROPERTY V 9 
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Many developers have been irked by the current W3C default box model. With that box 
model, if you define an element to be 500px wide with 20px of padding all around, then the 
element will actually have a width of 540px. This is not normally a problem - until you decide to 
change the padding. If you increase the padding, while still requiring that the total allotted space 
remain the same, then you have to recalculate your element’s width. 

Therefore, it can get a little bit tricky to maintain these sizes. With CSS3’s box-sizing property, 
however, you can easily fix this problem by telling the browser to render widths and heights with 
padding and borders included: 

001 .element { 

002 width: 200px; 

003 padding: 0 30px; 

004 box-sizing: border-box; 

005 } 

The default value of ‘content-box' (which represents the standard box model) is overridden by our 
value of ’border-box’, preventing the box from getting larger in area due to any increase in 
padding or border sizes. 

This is much more intuitive and actually works the same way that the box model works in 
Internet Explorer in ‘quirks mode' (or in IE5.5 mode). 


3D ANIMATED TRANSFORMS 


An exciting new feature that’s been added to 
the CSS3 specification is the ability to transform 
elements in three dimensions, as opposed to 
the usual boring old two. There’s a lot we could 
cover here, but we’ll try to keep our example as 
simple as possible so you can grasp the potential 
of this new feature. 

We’re going to flip this element using 3D 
Transforms. Here’s our HTML: 

001 <div class="object"> 

002 <div class="ellipse"xp>Front</ 
p></div> 

003 </div> 

As you can see. this object is actually made up of 
two elements - a wrapper and a child element 
with the child element representing the actual 
elliptical shape. CSS3 gives us the ability to flip the 
element in 3D space. The code below shows the 
pertinent CSS. Note that for brevity we’ve 
excluded any CSS that isn’t directly related to the 
3D effect that we want to create. 

001 .object { 

002 perspective: 700; 

003 text-decoration: none; 

004 transform-style: preserve-3d; 

005 } 

006 

007 .ellipse { 

008 transition: transform Is linear; 

009 } 

010 

011 .flipped { 


012 transform: rotateY(180deg); 

013 } 

The .object element is the wrapper element. On 
this element, we’ve applied a perspective of 700. 
The perspective property with a value of 700 
tells the browser the depth of the perspective. A 
lower value will make the 3D transform more 
obvious and remove any subtlety. 

Next, the wrapper element has its transform- 
style property set to ‘preserve-3d’. This tells the 
browser that any child elements should 
transform in 3D space. This overrides the default 
value of ‘flat’, which represents 2D space - the 
standard space for everything on an HTML page. 

Then on our ellipse child element we’ve added 
a rotation on the Y axis, plus a transition so that 
the rotation will animate. The rotation is in a 
separate CSS rule set so that we can use 
JavaScript to toggle that class and thus trigger 
the animated transform. 





As you can see from the images above, this 
creates a lot of potential for interesting and 
eye-catching animations. Combined with other 
CSS3 features, 3D transforms can accomplish 
things that previously were only possible with 
third-party plug-ins or JavaScript libraries. 


5 ONLINE CSS3 TOOLS 



1. TRANSFORMS 

westciv.com/tools/transforms/index.html 

Create 2D and 3D transforms with sliders. Pick animation 
options and hit Animate to preview the chosen values. 
The code created can include/exclude vendor prefixes. 

‘ CfASCT } t» M ounw roa 



2. CEASER: CSS EASING 
ANIMATION TOOL 

matthewlein.com/ceaser 

CSS transitions create animation techniques. Select an 
easing option, the duration, left, width, height and 
opacity, and the code is created with vendor prefixes. 


CSSS Button muki’r 1.0 Online lool 
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3. CSS3 BUTTON MAKER 1.0 

www.css3designer.com/tools 

Use sliders to modify the padding, box-shadow, 
background colours, border and text settings. Then use 
hover, active and visited to create the buttons. 



4. CSS3 CLICK CHART 

css3clickchart.com 

Select from a host of CSS3 properties, eg text-shadow, 
background-size and view example code. Get a live 
demo, a list of supported browsers, tools and tutorials. 



5. PATTERNIZER 

patternizer.com/imd3 

Patternizer is intuitive, powerful and a joy to use. Use the 
default or create a new pattern, add stripes, colours, 
adjust the opacity, width, set a gap and grab the code. 
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CSS RIBBONS 

Ribbon-like headers are another graphic 
element that have customarily required 
images. With CSS, we can now do this using 
some border and pseudo-element tricks. 

After we have our base styles for our 
header, we can apply CSS on two pseudo¬ 
elements that insert elements onto the page. 
We style to form the two parts of our ribbon. 


001 h2:before, h2:after { 
002 content: 


003 position: absolute; 


004 

width: 0; 

005 

height: 0; 

006 } 


This sets up two absolutely positioned 
elements with no width or height. Now we 
style the :before element, which will represent 
the primary portion of the fold: 


001 

h2:before { 

002 

width: 30px; 

003 

left: -39px; 

004 

top: 16px; 

005 

border-width: 34px 15px; 

006 

border-style: solid; 

007 

border-color: mediumaquamarine 


mediumaquamarine mediumaquamarine 


transparent; 

008 

} 


The values for the width, left and top properties 
will vary depending on the header size. This 
might also be affected by other properties like 
font size, line height, padding and so forth. 

The code that creates the ribbon is the 
large border width; with this value, the 
border gives us our ribbon edge. 

The only thing missing is the shadow-like 
portion of the ribbon that’s supposed to 
represent the reverse side of the folds. 


001 h2: after { 

002 left: 0; 


003 

top: 100%; 


004 

border-width: 8px 10px; 


005 

border-style: solid; 


006 

border-color: #666 #666 


transparent transparent; 


007 } 


Funky borders along with transparency 
create the shape of our ribbon. Then just 
ensure it’s positioned correctly! 



A ribbon is perfect for jazzing up your headers 


SPEECH BUBBLE 



A fluid speech bubble can be created with pure 
CSS. For this technique, we’re going to use pseudo¬ 
elements and gradients to get a nice-looking comic 
book-style speech bubble. 

To shape and colour our speech bubble, we'll use 
rounded corners and gradients, as shown below: 

001 .speech-bubble { 

002 border-radius: 50%; 

003 background-image: linear- 

gradient (#ff8000, #ff9500, #ffaa00); 
004 position: relative; 

005 } 

For brevity, we’ve excluded some of our styling. The 
most important ones are shown above. We’ve applied 
a linear-gradient that gives the background a nice 
three-colour transition. We’ve also set the border- 
radius at 50% to make the shape elliptical and fluid. 
We’ve also positioned the bubble relatively so we can 
precisely place our pseudo-elements. 

Now we insert our pseudo-elements to form the 
’pointer’ bubbles: 

001 .speech-bubble:before { 

002 content: "; 

003 display: block; 

004 width: 20px; 


005 

height: 20px; 


006 

border-radius: 50%; 


007 

position: absolute; 


008 

background-image: linear- 



gradient (#ff8000, #ff9500, 

#ffaa00); 

009 

bottom: -3px; 


010 

} 


011 

012 

.speech-bubble:after { 


013 

content: "; 


014 

display: block; 


015 

width: 14px; 


016 

height: 14px; 


017 

border-radius: 50%; 


018 

position: absolute; 


019 

background-image: linear- 



gradient (#ff 8000, #ff9500, 

#ffaa00); 

020 

bottom: -20px; 


021 

left: 20px; 


022 

} 



Both bubbles are positioned absolutely, and they’re 
each offset from the bottom-left rendered area of the 
main speech bubble. The bottom-most bubble is 
smaller and is positioned 20px to the left so that the 
bubbles are staggered in a particular direction. And 
for visual consistency, we’ve applied the same border- 
radius and gradient settings on these smaller bubbles. 


k k WE CAN DIVIDE A SECTION OF CONTENT 
INTO MULTIPLE AREAS USING CSS ALONE 9 9 
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TRANSFORM ORIGIN 


If you’ve messed around with CSS3 transforms, 
then you’ve probably noticed a limitation. Each 
time you do a transform, the starting point of the 
transform is fixed in the middle of the element. So, 
for example, if you do a rotation transform, the 
object will spin right in place. 

With CSS3’s transform-origin property, you can 
define a custom origin, or starting point, for your 
transformations. Here’s the code: 

001 .element { 

002 transform-origin: top left; 

003 } 

The two values represent horizontal and vertical 
offsets, respectively. The values could be 
keywords or traditional numeric values with units 
(eg 30px 30px). 


MULTIPLE COLUMNS 


Content on the page has 
traditionally been divided 
up into columns by using 
CSS floats. With CSS3, we 
can divide a section of 
content into further multiple 
areas using CSS alone. 
Here’s how the CSS for a 
standard three-column 
section of content might 
look to you: 

001 .example-colums { 
002 column-count: 3; 
003 column-width: 

75px; 

004 column-gap: 20px; 
005 column-rule: lpx 


solid #888; 

006 } 

These different CSS 
properties let us define 
various features of the 
columns, including the 
number of columns, the 
width of each column, the 
gap between the columns, 
and the size and colour of a 
vertical rule that separates 
the columns. 

The great thing about 
multiple columns is that if a 
browser doesn’t support 
them then they simply 
degrade to a single column. 
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If you’re familiar with photography techniques, you 
might have heard the term ‘tilt-shift’ before. This 
involves the tilting and shifting of the camera lens, which 
will often produce a blur effect on certain parts of the 
image, depending on where it is focused. 

With some clever use of text shadows plus CSS3 
transforms, we can simulate this effect on text. 

In this example, we’ve exaggerated the blur 
somewhat, to make it clear what we’re trying to achieve. 
So how is this done? To create this effect we’ve applied 




slightly different styles to each of the three words and 
we’ve put each word in its own paragraph element. 
Then we use the nth-child pseudo-class to target the 
different words and give them varying levels of blur. 

To create the illusion that the text is leaning on a 
backwards tilt we just have to apply some rotating and 
skewing to all three elements: 

001 p { 

002 -webkit-transform: rotate(8deg) 

skewX(-15deg); 

003 } 

Then each paragraph element has layered text shadows 
applied, with varying degrees of blur and offsets: 

001 p:nth-child(l) { 

002 text-shadow: #eee 0 5px 2px, 

003 #eee 2px 8px 8px, 

004 #eee 4px 12px 10px, 

005 #eee 6px 14px 14px; 


006 } 

007 

008 p:nth-child(2) { 

009 text-shadow: #eee 0 5px 2px, 

010 #eee 2px 8px 4px, 

011 #eee 4px 12px 4px, 

012 #eee 6px 14px 18px; 

013 } 

014 

015 p:nth-child(3) { 

016 text-shadow: #eee 0 5px 6px, 

017 #eee 2px 8px 10px, 

018 #eee 4px 12px 18px, 

019 #eee 6px 14px 26px; 

020 } 

As a result our text has the illusion of blur applied to 
different parts of the text, as if it had been photographed 
using tilt-shift photography. You can see an excellent 
example of this effect on the blog of Simurai, a Swiss CSS 
developer at bit.ly/aVDnoG. 


STITCHED BORDERS 


Here’s a neat little trick that utilises a well-known CSS 
technique combined with some CSS3 to give us a 
stitched border effect. 

Most CSS developers understand that the border- 
style property has a number of different values - despite 
the fact that 99 per cent of the time we use ‘solid’. If 
you’re curious, you can see a browser comparison of all 
the different border style values here: bit.ly/ri3pZt. 

The one we're going to use is the ‘dashed’ value: 
probably the second-most common border style. 

So how is this effect achieved? Well, you could do it in 
a few ways. But we’ll use the dashed border in 
combination with a box shadow. Here’s the CSS: 

001 .stitched { 

002 background: #ff5500; 

003 border: dashed 3px #222; 

004 border-radius: 10px; 

005 box-shadow: 000 10px #ff5500; 

006 } 




With CSS3 we can do simple animations that 
play when certain events occur on the page. 

Transitions are common on links nowadays, so 
here’s a simple colour transition that you can put 
on all text links on your site: 

001 a:link, a:visited { 

002 color: #fff; 

003 transition: color .5s ease; 

004 } 

005 

006 a:hover { 

007 color: #ac3600; 

008 } 


The event that triggers the transition is the :hover 
event, defined using the :hover pseudo-class. The 
transition property accepts four values. The first is 
the name of a property, which is any animatable 
CSS property. You could also use the ‘all’ keyword 
here to indicate that every property should 
animate, not just specific ones. 

The next value we’ve defined is the duration of 
the transition, which could be defined in seconds 
(s) or milliseconds (ms). The third value is the 
timing function, which defines the speed, or 
timing, of the animation. Finally you could also set 
a delay (again with seconds or milliseconds), but 
we haven’t included this in our example. 


k k WITH CLEVER USE OF TEXT-SHADOWS 
WE CAN SIMULATE TILT SHIFT J J 


MULTIPLE BACKGROUNDS 


Our dashed border is set to a dark grey colour, and is 3px 
wide, to give the impression of large stitches. But 
because the border appears on the outer-edge of the 
element, we need to add something that gives the 
illusion that the element’s surface is bleeding out of the 
stitched area. This is achieved by adding a non-blurred 
box-shadow that has the same colour as the background 
of the element itself. 

In addition, we’ve added rounded corners to the 
element to give it a more informal feel. You could mess 
around with the colours and size of the stitching to 
achieve the look you want, but this should give you a 
good foundation for reproducing this effect. 


Supporting browsers allow us to place more than 
one background image on a single image. Simply 
comma separate background values, like this: 

001 .element { 

002 background: url(image-l.jpg) no¬ 
repeat top left, 

003 url(image-2.jpg) no-repeat 

bottom right; 

004 } 


You can layer many background images one on top 
of the other ad-infinitum, or theoretically any value 
that the background-image property accepts. No 
more need for extra non-semantic markup, this 
helps keep your HTML clean and puts all the code in 
the CSS where it belongs. 

Just keep in mind that if you want non-supporting 
browsers to show the first image, you’ll have to 
declare that as a single background image on a 
previous line that this one would overwrite. 
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USE CSS SHORTHAND 


f REPEATING BACKGROUND PATTERNS 


Creating lightweight, readable code is not essential but there 
is no doubt it is highly desirable. CSS shorthand can be applied 
to several elements to create more efficient code. 

Margins and padding using shorthand go from the top 
clockwise, ie top. right, bottom, left. 

Borders amalgamate width, style and colour into one single 
line in the following order: size, style, colour. 

Fonts have to include size and family though other elements - 
eg style, weight, line-height - can be included. These typically 
appear before: ie style, weight, size, font-family. 

001 header { 

002 margin: 10px 0px 5px 2px; 

003 border: lpx solid #999; 

004 font: 36px Arial, Helvetica, sans- serif;} 


NO IMAGE BORDER 


Adding a link to an image creates a blue border around the 
image when using I nternet Explorer. To get rid of the border 
and ensure that linked images look the same across all 
browsers, use the CSS code shown below. This will remove 
the border on any linked images within a page. 

001 a img {border: none;} 

V___ ) 


Another web-design technique that has 
always traditionally required images is the 
creation of repeating tiled backgrounds. 

Now we can use the background-image 
property to insert a CSS3 layered gradient that 
mimics a repeating pattern. 

For our example, we’re going to produce a 
draughtboard-like effect. To create it, we're 
going to use a linear gradient along with CSS3’s 
new background-size property. 

001 body { 

002 background-color: #c2c2d6; 

003 background-image: linear- 

gradient(left, hsla(250, 100%, 
50%, 0.5) 50%, transparent 
50%), 

004 linear-gradient(top, hsla(240, 
100%, 50%, .5) 50%, 

005 transparent 50%); 

006 background-size: 100px 100px; 

007 } 

First we’ve set a background colour for the 
entire <body> element that will show through 
in the gaps created by the pattern. Next we 
define two layered gradients on the 
background-image property. The first gradient 


runs from left to right, starting with a semi¬ 
opaque purple shade and ending transparent. 
The key to making this have a straight edge is 
defining the end point of the colour the same 
as the starting point of the transparency. This 
ensures there’s no gradual change, but instead 
the change is sudden, giving the impression of 
no gradient at all. 

The second gradient has a similar effect, 
except it runs from top to bottom and uses a 
semi-opaque blue shade. Then we size the 
background with the background-size property 
to make our stripes the right size. Finally, 
because background images repeat by default, 
these patterns will repeat to fill the element, 
thus giving the impression of a traditional 
repeating background image. 



A simple repeating background pattern created 
solely with CSS3 


With CSS3, we no longer need jQuery or specialised 
animation libraries to do complex animation. Most 
modern browsers now include support for CSS3 
keyframe animations using the @keyframes at-rule. 
along with different animation-related properties. 

Let’s do something simple to demonstrate how easy 
it is. We’re going to create a ball that bounces continually. 
First, here’s the code that will style the ball itself: 

001 .ball { 

002 background: firebrick; 

003 border-radius: 50%; 

004 width: 160px; 

005 height: 160px; 

006 position: absolute; 

007 bottom: 0; 

008 left: 45%; 

009 animation-name: ballbounce; 

010 animation-duration: Is; 

011 animation-iteration-count: infinite; 

012 animation-direction: alternate; 

013 animation-timing-function: ease-out; 

014 animation-delay: 0; 

015 animation-play-state: running; 

016 animation-fill-mode: none; 

017 } 


BASIC ANIMATION 


There are a couple of key things to note here: We’ve 
shaped the ball using a value of 50% for our border- 
radius. This ensures that the ball will still be elliptical even 
if we change the width or height We have also 
positioned the ball absolutely. 

Next, we’ve defined some of our animation-related 
properties. We’ve named our animation, set a duration 
for it, told it to run on an infinite loop, and made the 
animation alternate in direction. We’ve also used a value 
of ‘ease-out’ for the timing function to give it a more 
realistic bouncing effect. 

Now we have to define our keyframe states, along 
with their respective property values, like this: 

001 @keyframes ballbounce { 

002 

003 from { 

004 bottom: 0; 

005 height: 90px; 

006 } 

007 

008 10% { 

009 bottom: 0; 

010 height: 160px; 

011 } 

012 


013 to { 

014 bottom: 50%; 

015 } 

016 
017 } 

The name that identifies the animation in the 
@keyframes rule needs to match a defined animation 
name. In our case, we’re matching the ballbounce 
animation from our .ball rule set. 

Two things happen in these keyframes: First, the ball’s 
bottom value changes to reach 50% (meaning it will be 
positioned 50% from the bottom of the viewport or 
from the bottom of a positioned parent). 

We've also added a keyframe that occurs 10% 
through the animation on each iteration. This keeps the 
ball at the bottom during the time it takes to reach this 
point, and we have also altered the height of the ball 
here. This height change makes it appear that the ball is 
being slightly flattened as it hits the ‘ground’. Along with 
the ease-out timing function, this creates a much more 
realistic bounce in the final animation. 

There’s so much more we could say about keyframe 
animations in CSS3, but if you want a more complete 
introduction than we can provide here, check out this 
Smashing Magazine article: bit.ly/iq35mR. 
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LINEAR & RADIAL GRADIENTS 



3D text is something that’s always required the use 
of non-optimal methods - whether that’s images, 
scripting or even a custom font. With CSS3 we can 
create 3D extruded text with just a few lines of code. 

Along with some other typographic properties, the 
CSS3 needed to produce this effect is shown below. It’s 
a pretty simple effect: just layer some text shadows 
with incremental offsets, which gives the appearance 
of a three-dimensional, or extruded, text effect: 

001 .3d-text { 

002 color: #ff8000; 

003 text-shadow: #ff5500 lpx -lpx 0, 


004 

#ff5500 2px -2px 0, 

005 

#ff5500 3px -3px 0, 

006 

#ff5500 4px -4px 0, 

007 

#ff5500 5px -5px 0, 

008 

#ff5500 6px -6px 0, 

009 

#ff5500 7px -7px 0, 

010 

#ff5500 8px -8px 0, 

011 

#ff5500 9px -9px 0, 


You may not have heard the term ‘anaglyphic’ 
before, but there’s a good chance you’ve probably 
seen this effect. This is when objects in images are 
duplicated and offset to create a stereoscopic 3D 
effect. Often anaglyphic images are presented in 
red and cyan shades. Here we’re going to use some 
CSS to produce an anaglyphic text effect. 

There are numerous ways to go about this, and 
the most common would be to duplicate the text 
and put it into a separate overlaying element. But 
that would produce some extra markup that would 
cause accessibility problems further down the line. 

So instead of adding an extra HTML element, 
well use pseudo-elements. Here’s how it’s done: 

001 hi { 

002 position: relative; 

003 font-size: 150px; 

004 font-family: sans-serif; 

005 letter-spacing: -5px; 

006 color: rgba(0, 0 , 255, 0.5); 

007 } 

008 

009 hi:after { 

010 content: "3D ROCKS"; 


012 #ff5500 10px -10px 0; 

013 } 

The keys to making this effect work well are the colour 
of the shadows and the lack of blur. By using a colour 
similar to the natural text colour, we’re giving the 
impression that the shadows are part of the text. By 
offsetting them by lpx at a time and using the same 
colour for all shadows, we’ve ensured layering is 
seamless. Finally, as the shadows have a 0 blur value, 
they are sharp so don’t really look like shadows at all. 


The Third 
Dimension 


Take your type to another level with 3D-text 


011 position: absolute; 

012 left: 10px; 

013 top: 5px; 

014 color: rgba(255,0,0,0.5); 

015 } 

Our hi element will contain the text ‘3D ROCKS’ in 
the HTML. That text is sized and given a blue colour 
that’s set to 50% Opacity. We set this element to be 
relatively positioned so we can place child elements 
absolutely inside of it. 

Then we create our :after pseudo-element. In the 
content property, we duplicate the text from the 
HTML, position the text absolutely, and give it a red 
hue, again at 50% Opacity. Although we are only 
creating two overlapping elements, the Opacity 
setting on the two elements gives the appearance 
of a third element - this is because the overlapping 
elements create a darker shade. 

3D ROCKS 

An anaglyphic text effect made easy with CSS 


Gradients are another CSS3 feature that 
have the potential to keep us out of our 
image editors. We can now create either 
linear or radial gradients and both kinds allow 
for multiple colour stops to help achieve some 
complex patterns and backgrounds. Let’s look 
at a simple example of each one. 

To create a straightforward two-colour 
fading linear gradient, just apply the following 
CSS to any element you wish: 

001 .example { 

002 background-image: linear- 

gradient(top, #ff9500, #eaff00); 
003 } 

This tells the browser to apply a two-colour 
linear gradient to the targeted element using 
the two specified colours. The ‘top’ keyword 
tells the browser where the gradient originates. 

If you want to add multiple colour stops in 
between the start and end colours, just add 
them to the comma-separated list of shades. 
The browser will automatically spread the 
colours out evenly. But if you want to indicate 
where the colours should change, you can 
add per cent values after each, like this: 

001 .example { 

002 background-image: linear- 

gradient (top, #ff9500 20%, 
#eaff00 80%); 

003 } 

What about radial gradients? These are a little 
more tricky but a simple radial gradient can be 
created with the following CSS3: 

001 .example { 

002 background-image: radial- 

gradient (center center, circle 
contain, #eaff00 0%, #ff9500 
100 %); 

003 } 

As with linear gradients, in order to add extra 
colour stops and to manually specify where 
the colour stops should occur, we can just add 
more tones and percentages in the comma- 
separated list of colours. 



A simple two-colour fading linear gradient in a 
box, which could serve as a basic background 


k k ANAGLYPHIC IS WHEN OBJECTS IN 
IMAGES ARE DUPLICATED AND OFFSET TO 
CREATE A STEREOSCOPIC 3D EFFECT » J 


ANAGLYPHIC TEXT 
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CSS3 introduces a host of options for designers to 
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01 

02 

03 

Lef t-liaiul page 


13 

14 

15 

Uiglit-liaiicl page 


04 

05 

06 

1. krystalrae.com 

2. thepenthouseproject.com 

7. www.edgarleijs.com 

8. uberspace.de 

16 

17 

18 

13. mendo.nl 

14. www.michelbergerbooze.com 

19. sayitwithflours.com 

20. lifeingreenville.com 

07 

08 

09 

3. vanlcom.mx 

4. datarockmusic.com 

9. www.voice.no 

10. www.offscreenmag.com 

19 

20 

21 

15. w ww.cryptrade.com 

16. www.celebratewhatworks.com 

21. www.flshy.com.br 

22. rexonaformen.com.mx/superhero 

10 

11 

12 

5. galleryofmo.co.uk 

11. timvandamme.com 

22 

23 

24 

17. www.rideforthebrand.net 

23. www.solidstudio.it 


6 . theuprisingcreative.com 


12.zoocha.com 


18. www.soulmedia.com.au 


24. www.feelthevoid.com 
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ADOBE CS6 

FIRST LOOK 

Web Designer gets an early glimpse at the latest Creative Suite 
from Adobe. Does CS6 deliver on high expectations - and will 
creatives even care? Read on to find out what the future holds... 


T he arrival of a new Adobe Creative Suite is as 
inevitable as death and taxes. A new Creative 
Suite promises much but doesn't always deliver 
the groundbreaking tools that many of its avid 
followers are hoping for. The advent of 5.5 was an 
interim release and its features and tools matched. 
Users didn't really get the bright, shiny experience they were 
hoping for, many being left a little disappointed. So, will the next 
version deliver on its potential and promise? Or, more to the point, 
will creatives really care what the latest iteration of the Adobe 
Creative Suite has to offer? Will there be enough new features to 
tempt users to migrate? Will the price tag be a barrier to adoption? 

All obvious questions and ones that need to be answered in 
the affirmative to make sure that the Creative Suite enjoys a long 
and illustrious reign on a digital creative's desktop. 

To get a more intimate and objective view of the latest CS 
release, Web Designer was invited to the 'Adobe CS6 First Look’ 
event. The delightful Adobe PR, Emma Wilkinson, set up eight 
'speed-dating' sessions where we got to sit, talk and be 
demonstrated at with some of the new features each member of 
the CS6 suite had to offer. A host of well-travelled Adobe experts 
welcomed us to each table and proceeded to extol the virtues of 
their selected software; a quarter of an hour was all the time that 
they had to impress, so it was a quick-fire blast through the new 
and specially selected features. 

The limited timeframe made each session informative and 
engaging but left us wanting more. A ring of the bell and a polite 
request to move on made sure that the event kept to its schedule. 
The short, sharp approach of the event ensured that all present 
got a glimpse of the future and what users can expect. And, to 
steal a line from elsewhere, the future looks bright. 

A recurring message permeated through all the sessions: 
Adobe CS6 gets you 80 per cent of the way there. The new 


improved Ul, additional features and the Mercury Engine come 
together to help creatives get to 80 per cent completion of a 
project in a much faster timeframe. A vastly improved workflow 
means that users can finish the final 20 per cent of a project to get 
the results they want quicker. 

Adobe's delivery of its product has taken a new direction with 
the vendor finally joining the cloud revolution, implementing a 
model that is befitting of its obvious talents. The big leap forward 
is the option to adopt a subscription model rather than fork out a 
small fortune for individual packages. Users can get the latest 
version of Dreamweaver and Photoshop for a fraction of the 
price. Imagine only having to shell out $50 a month for a couple 
of licences - pretty hard to resist, right? 

Adobe Creative Cloud (see boxout) is still in transition but when 
it is fully established it would seem that creatives will be drawn to 
the service. It simply makes sense, both financially and functionally. 
Users pay a monthly fee to get their hands on a host of Adobe 
favourites with regular upgrades, and can opt out or in when 
necessary. This will look to provide a focus for the latest collection 
of tools that grace CS6 (see highlights over the page). 

There is no doubt that Adobe has decided a software-only 
solution is old news and has created a model that should have 
happened with the release of 5.5. The implementation of the 
Creative Cloud service will undoubtedly attract more customers 
than it repels. A monthly fee for a host of applications and 20GB 
of storage space really is a no-brainer in our opinion. 

Adobe has also realised and recognised the technologies that 
designers and developers are adopting and is working with them 
to create a more rounded experience. 

At this early stage, it looks as if Adobe has created a service that 
today’s creatives and designers will want to use. Admittedly it’s not 
perfect as yet, but nevertheless it’s a massive step in the right 
direction. So we suggest you sign up and enjoy the ride. 
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ADOBE CS6 FIRST LOOK 


DREAMWEAVER 


Regular users of Dreamweaver are set to get an 
experience that will bring them very much up to date with 
the latest technologies and trends. Responsive design, 
mobile design and CSS3 media queries are key areas that 
web designers and developers need to be creating for. 

The CS6 version of Dreamweaver has recognised the 
need for more flexibility in the build process and has 
handed users a new set of tools for the job. What’s on offer? 
Fluid grid layouts. CSS3 transitions, enhanced jQuery Mobile 
support and the PhoneGap Build service. The fluid grid 
layouts allow for the quick creation of flexible and 
responsive layouts. These are effectively built on common 


screen resolutions and implement CSS3 media queries to 
help cater for all screen solutions. 

CSS3 transitions are big in page styling and their 
implementation is a code-free experience with C56. An issue 
with Dreamweaver has been the creation of cumbersome 
code, but this is a problem the Adobe team have recognised 
and are working on to get right, so cleaner code is much 
more prevalent within the latest version. 

Finally, sticking with the mobile theme Adobe has 
updated its jQuery Mobile support and integrated its 
PhoneGap Build service. Both are an excellent choice for 
those looking to build native apps for the mobile market. 




INDESIGN 


PHOTOSHOPI 


FLASH 


Web designers and developers will have little 
interaction with InDesign, but it still has a 
collection of features not a million miles away 
from webpage building. Liquid page rules use a 
collection of positioning options, which adapt to 
the page size and orientation. To help create the 
perfect layout there’s a new flexible width feature 
that makes pages far more responsive. The option 
to create alternative layouts is now all part and 
parcel of the software’s digital publishing 
capabilities for tablets. 


The king of image-editing tools has a new 
graphics engine offering an improved 
performance. With the new Layer search, users 
can search by a selected criteria, ie type, and 
locate a layer swiftly. Alongside Layer search there 
are the content-aware features and new video 
options. The content-aware technologies allow for 
the retouching of an image with precise results, 
like a super-charged clone tool. The new video 
capabilities provide a timeline that is reminiscent 
of Adobe’s more professional video suites. 


Adobe knows that to keep Flash current it has to 
adapt. The lack of Apple support is noticeable and 
the option to output to HTML5 is now part of the 
process. A conversion sets up a canvas element 
with associated coded libraries to work with all 
OSs and devices. The CreateJS extension is a 
toolkit incorporating a suite of JavaScript libraries 
and tools for building experiences typical of Flash 
but with HTML5. A useful new option is to embed 
the Adobe AIR runtime into an app; it may increase 
the file size, but it’s worth it. 



ADOBE CREATIVE CLOUD 


Adobe’s venture into the cloud looks to give creatives 
a fresh perspective on the typical desktop solution 


Adobe’s Creative Cloud service has been 
described as ‘a creative hub where you can 
explore, create, publish and share your work’. 

There is a clue in the service’s title as to how 
Creative Cloud is going to work. A subscription- 
based service, users pay a monthly fee (currently 
$49.99 in the US). This gives users access to a host 
of Adobe applications including Dreamweaver, 
Photoshop, Flash, InDesign, Illustrator, the new 


Adobe Touch apps, access to TypeKit web fonts 
and 20GB of cloud storage to boot. 

Unfortunately, the current setup doesn’t offer 
version control. Only a single instance of a 
document is stored, but this is easily remedied with 
a rename. Users cannot work with their favourite 
apps in the cloud. Software will still need to be 
downloaded to the desktop, but the delivery of 
updates and new features will be far more instant. 


What is the 
Mercury Engine? 


Adobe and NVIDIA have been 
partners since the heady days of 
CS4, and its Mercury Engine is 
effectively designed to work with 
Adobe products. In essence, the 
engine is optimised to give maximum 
performance with 64-bit operating 
systems and multi-core CPUs. It takes 
the workload from the CPU and gives 
it to the GPU (via an NVIDIA card) to 
give a smooth and swift experience. 
Each product has its very own version 
of the Mercury Engine, modified to 
work with the chosen application. 
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UK’S MOST ADVANCED 

RESELLER HOSTING 

Sign up to our award winning Reseller Hosting and sell unlimited websites with unlimited 
web space, bandwidth, databases, email and more, all at no extra cost. 

The complete Reseller Hosting solution 

Sell unlimited websites and domain names, as well as our wide range of additional products to 
fit your customer’s needs. Use our hosting billing & CRM solution ‘HostPay’ to sell in real time. 





ONLY 

£1 



Increase your profits with 
exclusive reseller discounts 


100% YOUR brand 

Every aspect of your hosting is white label and can be branded as your own, including your 
customer’s control panel, webmail, welcome emails and anything else you can think of! 



G Dedicated Servers 
G Virtual Servers 
G goMobi 
G SSL Certificates 


Create your own packages 

Customise each account to any level you like. From how much web space and bandwidth 
your customers get, to selecting what web apps they can install from their control panel. 



G Hosted Exchange 
G Premium Email 


G Bulk Domain Names 




exclusive 


EXCLUSIVE 


24/7 UK support 


We don’t employ any contractors, temps or external support services; all our support 
team are 100% based in our UK offices and full time members of staff. 


No hidden fees 

All the features you need to attract and manage customers are included as standard. Unlike 
our competitors we don’t charge you for basic functionality, such as your customers getting a 
brandable web hosting control panel or additional MySQL databases. 


^ ^ Heart Internet support their 

customers with market-leading 
hosting technology at 
great prices 


Suzi Perry 

Technology TV Presenter 


As well as selling unlimited websites, pick and choose from a wide range of additional products, including: 


Sell Virtual Servers 

Only £8.99 per month 

y Create your own VPS packages a 

y Full API integration a 

y Linux & Windows % 

y Dell & Intel hardware 

y Full white label control panel for 
your customers 

y Sell VPS in real time 


Sell Dedicated Servers 

Only £59.99 per month 


No annual contract 
Linux & Windows 

- 

Dell & Intel hardware 

r 

No set up costs 


y Full white label server control 
panel for your customers 


Sell servers in real time 


Sell Hosted Exchange 

Only £4.99 per mailbox 


MS Exchange 2010 as standardN 

Free Outlook 2010 for you & a 
your customers 

10GB storage \ 


y Transfer in Exchange 2003 & 
2007 easily 

y Sell Exchange in real time 


EXCLUSivc 

50% 

OFF i 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 

Normal Price from only £29.99 per month 


# heart internet 

www.heartinternet.co.uk 

Web hosting I Reseller hosting I VPS I Servers 









tutorials 


Create kinetic 

animations 

withCSS3 

Animations made using CSS3 can be 
nested inside each other and carry on 
indefinitely enabling us to create 
complex behaviours with simple code 

tools I tecli I trends Web editor (we used Dreamweaver), graphics editor 
(we used Photoshop) expert Sam Hampton-Smith 





f you’re a regular reader of Web 
Designer, you’ll be familiar with the idea 
that CSS3 can replace a lot of the work 
involved in animation that we used to 
rely upon JavaScript for. Simple 
animations triggered by user interactions 
are very easy to achieve and often require 
less code than the JavaScript equivalent, 
while offering a good deal more control. 

What you may not be aware of yet is 
that as well as user-triggered animations, and 
animations applied per element on the page, you 
can also create template animations that can be 
applied to multiple objects, and you don't need 
to rely on user input to initiate an animation. 

In this tutorial were going to take advantage 
of these lesser-known capabilities of CSS3 to 
re-create our Solar System. The animations 
required are surprisingly simple, and yet the final 
result appears sophisticated and complex - 
which is another way of saying you'll get a great 
result for not too much effort! 



The animations are simple yet the 
final result appears sophisticated 


Basic HTML 

Our Solar System will be created with some of 
the most basic HTML you can imagine. We've coded up 
a simple ordered list with a different list item for each 
body in the Solar System. The Sun appears as the first 
item, and Pluto as the final one. For the Earth we've also 
included a nested unordered list to accommodate our 
extra body, the Moon. 

001 <!DOCTYPE HTMLXhtmlxhead> 

002 <meta http-equiv="Content-Type" 
content="text/html; charset=UTF-8"> 

003 <title>CSS3 Kinetic Animation</title> 

004 <link rel="stylesheet" type="text/css’’ 

href="styles/screen. css"> 

005 </headxbody> 

006 <div id="container”> 

007 <hl>CSS3 Kinetic Animation</hl> 

008 <div id=”solarsystem"> 

009 <ol> 

010 <li>Sun</li> 

011 <li>Mercury</li> 

012 <li>Venus</li> 

013 <li>Earth 

014 <ul> 

015 <li>Moon</li> 

016 </ul> 

017 </li> 

018 <li>Mars</li> 

019 <li>Jupiter</li> 

020 <li>Saturn</li> 

021 <li>Uranus</li> 

022 <li>Neptune</li> 

023 <li>Pluto</li> 
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Create kinetic animations with CSS3 



CSSJ Kinetic Animation 


CSS3 Kinrtic Animation 


019 #solarsystem ol>li:nth-child(2) { 

020 width: 10px; 

021 height: 10px; 

022 background: green; 

023 } 

024 #solarsystem ol>li:nth-child(3) { 

025 width: 15px; 

026 height: 15px; 

027 background: orange; 

028 } 

029 #solarsystem ol>li:nth-child(4) { 

030 width: 20px; 

031 height: 20px; 

032 background: blue; 

033 } 


<Above> 

• As we create the different object 
sizes, we end up with a series of 
different sized square boxes that 
don’t look much like planets! 


< Above, top to bottom* 

• The basic HTML structure is a 
simple ordered list containing all 
the planetary objects in our Solar 
System, including the Moon 


05 




024 </ol> 

025 </div> 

026 </div> 


02 


Basic CSS 

We need to determine the basic characteristics 
for our model. We’ve opted for a !000px-wide Solar 
System, and although this will become circular later, to 
start off we’ve simply set the width and height attributes 
to I.OOOpx each. We’ve also set it to appear central in 
the window by adding ’margin:auto;’ 

001 /* KINETIC CSS3 ANIMATION */ 

002 #solarsystem { 

003 position: relative; 

004 margin: auto; 

005 padding: 0; 

006 width: 1000px; 

007 height: 1000px; 

008 } 


Light and dark 

We’ve created graphics for 
each planet that have a 
light side and a dark side. 
The light side is closest to 
the Sun, accurately pointing , 
towards it throughout the 
animation for added 
realism. 


Target some more 

We need to work through each planet assigning 
a width and height, which will always be the same. Keep 
in mind that each planet is a different size, but don’t get 
too caught up in being absolutely scientifically correct 


The Moon 

The Moon is a special case as it’s a nested list 
item inside an unordered list. We’ll target it in the same 
way, just referring to the containing item - the Earth - to 
get it. Complete the remainder of the space bodies to 
size each accordingly. The end result should be a series 
of coloured squares if you load this in your browser. 

001 /* The Moon */ 

002 #solarsystem ol>li:nth-child(4) li { 

003 height: 10px; 

004 background: grey; 

005 text-indent: -100000px; 

006 } 

007 /* Mars */ 

008 #solarsystem ol>li:nth-child(5) { 

009 width: 14px; 

010 height: 14px; 

011 background: red; 

012 } 

013 /* Jupiter */ 

014 #solarsystem ol>li:nth-child(6) { 

015 width: 40px; 


03 


CSS targeting 

We could have given each list item a unique id 
or class, but with CSS targeting we can simply use the 
:nth-child(n) selector to choose the relevant item. Let’s 
start by grabbing the Sun and setting it to be lOOpx 
wide and high. Nth-Child numbering starts at 1 (rather 
than 0 as script indexes do). 

001 #solarsystem ol>li:nth-child(l) { 

002 width: 100px; 

003 height: 100px; 

004 background: red; 

005 } 


- for example. Pluto is a Dwarf Planet but we’ve included 

016 

height: 40px; 


it for ease. We've added code to take us as far as Earth: 

017 

background: 

tan; 




018 

background: 

red; 

001 

/* KINETIC CSS3 ANIMATION */ 

019 

} 


002 

#solarsystem { 


020 

/* Saturn */ 


003 

position: relative; 


021 

#solarsystem ol>li:nth-child(7) { 

004 

margin: 

auto; 

022 

width: 36px; 


005 

padding: 0; 


023 

height: 36px; 


006 

width: 1000px; 


024 

background: 

green; 

007 

height: 

1000px; 

025 

} 


008 

> 


026 

/* Uranus */ 


009 

#solarsystem ol li { 


027 

#solarsystem ol>li:nth-child(8) { 

010 

display: block; 


028 

width: 32px; 


011 

overflow: hidden; 


029 

height: 32px; 


012 

text-indent: 

-100%; 

030 

background: 

orange; 

013 

} 


031 

} 


014 

#solarsystem ol>li:nth-child(l) { 

032 

/* Neptune */ 


015 

width: 100px; 


033 

#solarsystem ol>li:nth-child(9) { 

016 

height: 

100px; 

034 

width: 30px; 


017 

background: 

red; 

035 

height: 30px; 


018 

> 


036 

background: 

aqua; 
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Create kinetic: animations with CSS3 




<Left> 

• Positioning is 
achieved with 
negative margins. 
This allows us to 
ensure the point of 
animation will be 
easy for us to work 
out later 


Position in space 

' The next task is to position each element in 
space. Start by assigning a position:absolute rule to 
each planetary object and setting the top and left 
properties to be 500px (half of the overall Solar System 
width). Then use a negative margin to position the 
different objects out in space. The Sun 

shouldn't have any margin; the rest of 
^ the planets need more the farther 
L out they get. 

001 /* The 

Sun */ 

002 


Make it round 

You can make any object 
appear round using CSS by 
simply setting the width to 
match the height, then 
applying a border-radius 
equal to half the width to 
the element. This will 
create a perfect circle - 1 

ideal for a planet! 


»( 

f 003 
width: 


#solarsystem 
ol>li:nth-child(l) 


005 


004 

100px; 

height 

100px; 

border- 

radius: 

50px; 


006 

red: 


background: 


037 } 

038 /* Pluto */ 

039 #solarsystem ol>li:nth-child(10) { 

040 width: 6px; 

041 height: 6px; 

042 background: grey; 

043 } 

Square to circular 

It's a little difficult to visualise the squares as 
planetary objects when they're just big squares, so let's 
deal with that by adding a border-radius property to 
each planet. The radius needs to be half the width of 
the object. We can also apply the same approach to the 
overall ordered list to make it appear circular. 





007 

position: absolute; 


019 

#solarsystem 

ol>li:nth-child(2) 

008 

top: 500px; 


{ 



009 

left: 500px; 


020 

width: 

10px; 

010 

margin-left: 

-50px; 

021 

height: 

10px; 

011 

margin-top: 

-50px; 

022 

border-radius: 

5px; 

012 

> 


023 

background: 

green; 

013 

/* Mercury */ 


024 

} 


014 

#solarsystem ol>li:nth-child(2) 

{ 

025 

/* Venus */ 


015 

width: 10px; 


026 

#solarsystem ol>li: 

:nth-child(3) { 

016 

height: 10px; 


027 

width: 16px; 


017 

border-radius: 5px; 


028 

height: 

16px; 

018 

background: 

green; 

029 

border-radius: 

8px; 

019 

position: absolute; 


030 

background: 

orange; 

020 

top: 500px; 


031 

> 


021 

left: 500px; 



001 

#solarsystem ol { 


002 

position: relative; 


003 

margin: 

auto; 

004 

padding: 0; 


005 

width: 1000px; 


006 

height: 

1000px; 

007 

border: 

lpx solid #333; 

008 

border-radius: 

500px; 

009 

> 


010 

/* The Sun */ 


011 

#solarsystem ol>li:nth-child(l) { 

012 

width: 100px; 


013 

height: 

100px; 

014 

/* Jupiter */ 


015 

border- radius: 

50px; 

016 

background: 

red; 

017 

} 


018 

/* Mercury */ 




022 

023 

024 

025 

026 

027 

028 

029 

030 

031 

032 

033 

034 

035 

036 


margin-left: 

margin-top: 


-80px; 

-5px; 


> 

/* Venus */ 

#solarsystem ol>li:nth-child(3) { 
width: 16px; 

height: 

border-radius: 
background: 
position: absolute 
top: 500px; 

left: 500px; 

margin-left: 
margin-top: 

} 


16px; 

8px; 


-110px; 


orange; 


8px; 


<Above> 

• Our Moon problem is now resolved so that the light 
side of the Moon always points towards the Sun (the 
point at which light is emitted in the Solar System) 


Complete the positioning 

Work through each planet offsetting it using the 
negative margin trick. Note that we're positioning every 
planet out from the Sun along a horizontal axis. We 
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keep the planets in a perfect line by adjusting the 
margin-top to be a negative version of the border 
radius. When you've completed all the planets, you 
should have a perfect line of them across the system. 

Add animation 

Now the basics are set up. let’s create the 
animation that will show planets orbiting the Sun. We'll 
start by creating a preset animation with the 
@-keyframes selector to assign a set of keyframes from 
the start of the animation to the end. In this case we 
want to go from 0 degrees to 360 degrees rotation. 

001 @-webkit-keyframes orbitsun { 

002 from { -webkit-transform:rotate(0deg) 

> 

003 to { -webkit-transform:rotate(360deg) 

> 

004 } 

005 @-moz-keyframes orbitsun { 

006 from { -moz-transform:rotate(0deg) } 

007 to { -moz-transform:rotate(360deg) } 

008 } 

Assign the animation 

The next step is to tell our planets to animate. 
We can do this en masse by using a simple selector to 
grab every planet and apply our preset animation to it. 
We can also set the animation to continue forever, and 
to animate linearly (which means the animation will be 
uniform over time). 

001 #solarsystem ol>li { 

002 -webkit-animation-iteration- 

count:infinite; 

003 -webkit-animation-timing- 

function:linear; 

004 -webkit-animation-name:orbitsun; 

005 -moz-animation-iteration- 

count:infinite; 

006 -moz-animation-timing-function:linear; 

007 -moz-animation-name:orbitsun; 

008 } 

Set the origin 

We need to set the animation origin point. We 
want to set the origin so that the animation happens 
about the centre point of the Solar System. This means 
offsetting the origin by the opposite of the negative 
margins we used, and placing it back to where the 
object is positioned without any margin. 


001 

/* Mercury */ 


002 

#solarsystem ol>li:nth-child(2) { 

003 

width: 10px; 


004 

height: 10px; 


005 

border-radius: 5px; 


006 

background: 

green; 

007 

position: absolute; 


008 

top: 500px; 



Code library 

Creating the animation (part 1) 

Our animation uses a continual rotation, and works by offsetting the transform 
origin for each planet to rotate about the centre 


001 

/* The Sun */ 


002 

#solarsystem ol>li:nth-child(l) { 

003 

width: 

100px; 

004 

height: 

100px; 

005 

border-radius: 

50px; 

006 

background: red url(sun.jpg) no-repeat 

007 

position: absolute; 


008 

top: 

500px; 

009 

left: 

500px; 

010 

margin-left: 

-50px; 

011 

margin-top: 

-50px; 

012 

-webkit-box-shadow: 

0px 0px 20px #fc9d34; 

013 

-moz-box-shadow: 

0px 0px 20px #fc9d34; 

014 

box-shadow: 

0px 0px 20px #fc9d34; 

015 

} 


016 



017 

/* Mercury */ 


018 

/* REMOVED TO ABBREVIATE THE FULL CODE */ 

019 



020 

/* Venus * 


021 

#solarsystem ol>li:nth-child(3) { 

022 

width: 

16px; 

023 

height: 

16px; 

024 

border-radius: 

8px; 

025 

background: 

orange url(venus.jpg) r 

top left; 


026 

position: 

absolute; 

027 

top: 

500px; 

028 

left: 

500px; 

029 

margin-left: 

-110px; 

030 

margin-top: 

-8px; 

031 

-webkit-transform-origin: 110px 8px; 

032 

-moz-transform-origin: 110px 8px; 

033 

> 


034 



035 

/* The Earth */ 


036 

#solarsystem ol>li:nth-child(4) { 

037 

width: 

20px; 

038 

height: 

20px; 

039 

border-radius: 

10px; 

040 

background: 

blue url(earth.jpg) no¬ 

top left; 


041 

position: 

absolute; 

042 

top: 

500px; 

043 

left: 

500px; 

044 

margin-left: 

-150px; 

045 

margin-top: 

-10px; 

046 

-webkit-transform-origin: 150px 10px; 

047 

-moz-transform-origin: 150px 10px; 

048 

} 



We set the position of the planet to the centre of the Solar System, then use a negative margin to position 
it in space. The transform origin is set to the centre of the system. 
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009 left: 500px; 

010 margin-left: -80px; 

011 margin-top: -5px; 

012 -webkit-transform-origin:80px 5px; 

013 -moz-transform-origin:80px 5px; 

014 } 

It’s all about timing 

We’re ready to assign the amount of time the 
animation should take. For each planet this will be 
longer according to how far from the Sun it is 
positioned. Starting with Mercury, add a new rule with 
the animation-duration property set in seconds - we 
opted for five seconds. Finally, make sure you save and 
then test to watch Mercury rotate. 

001 #solarsystem ol>li:nth-child(2) { 

002 -webkit-animation-duration:5s; 


003 -moz-animation-duration :5s; 

004 } 

Repeat for each planet 

We now need to assign the same code to each 
planet. Remember to set the transform-origin property 
and assign the animation-duration. The transform-origin 
will always be the opposite of the margin values for that 
planet. The animation duration is up to you. 

001 #solarsystem ol>li:nth-child(3) { 

002 -webkit-animation-duration:10s; 

003 -moz-animation-duration:10s; 

004 } 

Repeat and repeat! 

You'll need to carefully set each planet’s rotation 
to make sure it works and is appropriate to the Solar 
System overall. Continue working your way through the 
space bodies until you’ve completed all ten. 


An Introduction To CSS) Keyframe 




Understanding and 
using keyframe 
animations in CSS3 


We’re all familiar with the idea of 


15 


Test 



animations applied using CSS3 to 
control mouseovers. These are 
typically applied directly to the 
element being targeted and will 
normally only have a start and end 
state. Using a different approach, we 
can create templated animations 
using @-keyframes that help us to 
take animation a step further. 

(©-keyframes allow us to create a 
basic animation consisting of two or 
more states through which an 
element being animated will 
transition. The basic syntax we’ve 
used in this tutorial uses a simple start 
and end keyframe, allowing the 
browser to work out the frames 
between. This specification enables 
us to have more than two keyframes, 
however, and each keyframe can set 
different properties, allowing us to 
create sophisticated and complex 
animations that can be applied easily 
to different elements on our page. 


At this point you’ve got a fully working model of 
the Solar System, complete with the Moon in orbit 
around the Earth (if not, go back and fix that now 
referring to the code on the cover disc). Test this works 
properly before moving on to the next steps. 

Add a background 

Open Photoshop and create a new document 
I.OOOpx square. Fill it with 50% grey then choose 
Noise>Add Noise. Select a level around 3%. Add a slight 
blur of 0.5px, then use lmage>Adjustments>Threshold 
to create a star field. Invert the colours by choosing 
lmage>Adjustments>lnvert and save as a JPEG. Add this 
as a background to the ’solarsystem’ unordered list. 

Planet background 

Create a Photoshop document for each of the 
planets at the appropriate size and either create your 
own texture, or download a free image from NASA, 
Wikipedia or similar. Make sure the planet texture fills 
the document. Create fake lighting by adding a 
black-to-white gradient set to Multiply from left to right. 
Save and apply to each planet in turn. 


Lift titles 
off the page 


k 18 


The Moon 
problem 


Adding a text-shadow to 
important titles on your 
page will lift them off the 
background and add a bit 
of polish to your design, 
without adding any 
additional overhead to 
page rendering time. 


You’ll notice that as the 
planets rotate about the 
Sun. the light edge of each 
planet faces towards it. 
Unfortunately, the same 
r isn’t true for the Moon 
because it’s orbiting the 
Earth - not the Sun. We do 
this by creating an animation 
to spin the Moon on its own 
particular axis, and ensure the light 
side of the Moon always faces the sun. 


Fix the Moon 

We can fix our Moon issue by adding a set of 
<span> tags around the word ‘Moon’ in our source code, 
then creating a new set of keyframe animations that 
rotate in the opposite direction to the planets. Finally 
apply this to the Moon’s span tag at the same timing as 
the overall Moon rotation. 

001 #solarsystem ol li span {> 

002 -webkit-animation-iteration- 

count:infinite; 

003 -webkit-animation-timing- 

function:linear; 

004 -webkit-animation- 

name:reverseorbitsun; 

005 -moz-animation-iteration- 

count:infinite; 

006 -moz-animation-timing-function:linear; 

007 -moz-animation-name:reverseorbitsun; 

008 } 

009 /* The Moon */ 

010 #solarsystem ol>li:nth-child(4) li { 

011 -webkit-animation-duration:2s; 

012 -moz-animation-duration:2s; 

013 } 

014 #solarsystem ol>li:nth-child(4) li span { 
015 -webkit-animation-duration:2s; 

016 -moz-animation-duration:2s; 

017 } 

018 @-webkit-keyframes reverseorbitsun { 

019 from { -webkit-transform:rotate(Odeg) 

> 

020 to { -webkit-transform:rotate(-360deg) 

} 

021 } 

022 @-moz-keyframes reverseorbitsun { 

023 from { -moz-transform:rotate(0deg) } 

024 to { -moz-transform:rotate(-360deg) > 

025 } 

2q Update the background 

You’ll notice that our problem isn’t yet fixed - this 
is because while the <span> is rotating correctly, it 
doesn’t have a background image - so you can’t see the 
effect in place. Move the background image from the 
Moon <li> to the Moon <span> and all will be well. 

001 /* The Moon */ 

002 #solarsystem ol>li:nth-child(4) li { 

003 width: 10px; 

004 height: 10px; 

005 border-radius: 5px; 

006 text-indent: -100000px; 

007 position: absolute; 

008 top: 10px; 

009 left: 10px; 

010 margin-left: -30px; 

011 margin-top: -5px; 

012 -webkit-transform-origin:30px 5px; 

013 -moz-transform-origin:30px 5px; 
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014 } 

015 #solarsystem ol>li:nth-child(4) li span { 
016 width: 10px; 

017 height: 10px; 

018 border-radius: 5px; 

019 position: absolute; 

020 top: 0; 

021 left: 0; 

022 display: block; 

023 background: grey 

url(moon.jpg) no-repeat top left; 

024 } 

Add a background 

The page looks a little bland behind the Solar 
System model, so locate a Creative Commons image 
using a web search (compfight.com is a good resource 
for sourcing these) and paste it into a big document in 
your graphics editor. Change the opacity and blend with 
a dark grey colour in order to create a pleasing 
background for your body tag. 

Use web fonts 

The default font in most browsers is pretty ugly 
too, so let's quickly grab a web font to jazz it up a little. 
We used Google Web Fonts and looked for a display 
font that appeared reasonably 'space age'. In the end 
we’ve opted for Wall Poet, which is a nice futuristic font 
with lots of clean lines. 

001 font-family: ‘Wallpoet’, sans-serif; 

Add text shadow 

Add an extra little flourish to your typography by 
using the text-shadow property to create a shadow 
that’s offset from the text but without any blur. This will 
lift the title off the page and help to draw the viewer’s 
eye to it. You can also add a subtitle with extra 
information and style it similarly. 

001 text-shadow: 3px 3px 0px #ccc; 

Final test 

We’re now ready to test for the final time so 
check your page in as many WebKit and Firefox 
browsers as you can. Keep in mind that the code we’ve 
created will only work in browsers that support CSS 
animations, and we’ve used vendor prefixes to target 
these browsers. As more browsers add support, you 
can update your code to target those too. 

001 complete code listing on the disc 

Take it to the next level 

We’ve completed our 2D model of the Solar 
System, but it doesn’t need to stop here. You could 
consider adding rollover infographic popups to describe 
each of the planets, or if you'd like to really push the 
boat out, what about attempting a 3D version using 3D 
transformations in WebKit? 


You could consider adding 
rollover infographic popups to 
describe each of the planets 


Code library 

Creating the animation (part 2) 

Our animation uses a continual rotation, and works by offsetting the transform 
origin for each planet to rotate about the centre - here’s the final code section: 


We assign the preset 
animation to the planets 
with this bit of code by 
assigning the animation 
to all list items within the 
‘solarsystem’div. 


For each planet we set the 
duration that the 
animation should 
operate. Each planet 
takes longer to rotate the 
farther it is from the Sun. 


These instructions create 
a preset animation with 
keyframes. The code 
simply says animate from 
a rotation of 0 degrees to 
360 degrees. 


001 /* Assign the animation */ 

002 #solarsystem ol li { 

003 -webkit-animation-iteration-count:infinite; 
004 -webkit-animation-timing-function:linear; 

005 -webkit-animation-name:orbitsun; 

006 -moz-animation-iteration-count:infinite; 

007 -moz-animation-timing-function:linear; 

008 -moz-animation-name:orbitsun; 

009 } 

010 

011 /* Animate the sun */ 

012 #solarsystem ol>li:nth-child(l) { 

013 -webkit-animation-duration:300s; 

014 -moz-animation-duration:300s; 

015 } 

016 

017 /* Mercury */ 

018 #solarsystem ol>li:nth-child(2) { 

019 -webkit-animation-duration:15s; 

020 -moz-animation-duration:15s; 

021 } 

022 

023 /* Venus /* 

024 #solarsystem ol>li:nth-child(3) { 

025 -webkit-animation-duration:20s; 

026 -moz-animation-duration:20s; 

027 } 

028 

029 /* Earth */ 

030 #solarsystem ol>li:nth-child(4) { 

031 -webkit-animation-duration:24s; 

032 -moz-animation-duration:24s; 

033 > 

034 

035 @-webkit-keyframes orbitsun { 

036 from { -webkit-transform:rotate(0deg) } 

037 to { -webkit-transform:rotate(360deg) } 

038 > 

039 

040 @-moz-keyframes orbitsun { 

041 from { -moz-transform:rotate(0deg) } 

042 to { -moz-transform:rotate(360deg) } 

043 } 
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Build an 
HTML5 game 
with EaselJS: 
parti 

Make a slick old-school platformer 
without plug-ins using HTML5 Canvas 

tools I tecli I trends Dreamweaver, HTML5, EaselJS 
expert Mark Shufflebottom 


ED @ 9 



aming on the web is moving on in leaps 
and bounds. What was once the domain 
o.ooc... of Flash alone to create rich, immersive 

game experiences is slowly becoming the 
domain of HTML5, with technologies like 
Canvas and WebGL able to offer 
considerably fast gameplay. In Web 
Designer #193 we took a first look at 
EaselJS, a library for Canvas that offers a 
Flash-like display list, cutting out some of 
the work in creating a Canvas app, animation or game. 
Easel is a great way to kick-start your project, so if you 
missed the tutorial you can catch up with this one. 

Here we’re looking at going much further with the 
framework and creating a platform game, complete 
with gravity functions, obstacles to avoid, pick-ups and 
an objective to complete. The general idea is to dash 
across the platforms, avoid the falling crates attempting 
to crush you. pick up the key and then head for the exit! 

You will learn vital skills, such as creating prototype 
objects in JavaScript, applying gravity to your character, 
collision detection with bounding boxes, and even 
collision detection with Pythagoras’ theorem! It sounds 
complicated, but we assure you it’s all very 
straightforward. This issue we create the supporting 
prototype objects and prepare the initial code, with the 
main game engine being developed next month. 

Gaming is becoming the domain of 
HTML5, with Canvas and WebGL able to 
offer considerably fast gameplay 



Starting off 

Copy the start folder from the cover CD to the 
desktop and then download EaselJS from easeljs.com. 
Copy the lib folder into the start folder on your desktop 
and create a new JavaScript file in Dreamweaver. Add 
the following code that sets up the document to be our 
platform object; we will make our platforms out of this 
object in the game. 


001 

(function(window) { 

002 

function Platform(w,h) 

003 

this.width = w; 

004 

this.height = h; 

005 

this.initialize(); 

006 

} 

02 

Prototype object 


We’re using the prototype object of JavaScript 
that simplifies the process of adding custom properties 
or methods to instances of an object. Here we can 
create the platform as an object, pass in the width and 
height and the platforms will arrive in our game in a 
modular code format. We hold each platform in an 
EaselJS container. 

001 Platform.prototype = new Container(); 

002 Platform.prototype.platformBody = null; 

003 Platform.prototype.Container_initialize = 
Platform.prototype.initialize; 

( Initialise the platform 

Here we define the constructor for the object. 

We initialise the object and create a new vector shape in 
the variable platform body. This shape is then added to 
the overall container using the addChild command. So 
far though there is no defined shape, so we call the 
function makeShape which will create the platform. 

001 Platform.prototype.initialize = function() 

{ 

002 this.Container_initialize(); 

003 this.platformBody = new Shape(); 

004 this.addChild(this.platformBody); 

005 this.makeShapeO; 

006 } 

Cut some shapes 

Here we define the makeShape function which 
we make using the EaselJS graphics class. We draw a 
rectangle, but we’re not filling it with a colour because 
the platform graphics are already on the background 
image we are going to place in the canvas later. Finally 
we close the object allowing it to be called as ’new 
PlatformO’ from our main game script. 

001 Platform.prototype.makeShape = function() 

{ 

002 var g = this.platformBody.graphics; 

003 g.drawRect(0,0,this.width,this.height); 
004 } 
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<Left> 

• On the background image here, you can see our 
platforms are already drawn, so our platforms 
are going to be invisible shapes to collision 
detect our hero against later 

< Abo ve, top to bottom> 

• The hero sprite sheet is passed into the hero 
object. This contains 20 frames of animated 
walking, with an idle pose and a jump pose 

• EaselJS has a handy function built in which 
allows a sprite sheet to be flipped so you only 
need to generate animation for one direction 


005 window.Platform = Platform; 

006 }(window)); 

Save and start again 

Save the file as 'Platform.js’ and create a new 
JavaScript file to hold our hero or player. Add the code 
as shown below. This enables us to create a hero object 
similar to the platform in step 1. Here though we pass in 
the hero image which will be our sprite sheet of the 
character animation. We will then be able to use that 
animation in our game. 

001 (function(window) { 

002 function Hero(imgHero) { 

003 this.initialize(imgHero); 

004 } 

The prototype hero 

Again we define the hero as a prototype; this 
time it is a bitmap animation instead of a container as 
the base object. We set up the initialise code over the 
top, with a unique name so as not to overwrite the base 
class. We then define our sprite sheet as a new object, 
ready to extract the animation. 


001 Hero.prototype = new BitmapAnimation(); 

002 Hero.prototype.Animation_initialize = Hero, 
prototype.initialize; 

003 Hero.prototype.initialize = 
function(imgHero) { 

004 var spriteSheet = new SpriteSheet({ 

Define the animation 

Here we pass in the image we are going to use, 
and some information about the frames is set up such 
as width and height. The regX and regY is the 
registration point, which is at the feet of the character to 
provide a collision point with the platforms. The 
animation is set up so that the right frames are called. 

001 images: [imgHero], frames: {width: 60, 
height: 85, regX: 29, regY: 80}, animations: { 
002 walk: [0, 19, "walk”], 

003 idle: [20, 20], 

004 jump: [21, 21] } }); 

( Flip the animation 

The next line of code flips the animation so that 
we have animation for the left-hand direction as well as 


the right - evening up our screen. This saves on loading 
time for our image. The animation is initialised and told 
to stop on the ‘idle’ pose. As it was previously, this is set 
so that the hero can be called in the main document 
using new HeroO as an object. 

001 SpriteSheetUtils. 
addFlippedFrames(spriteSheet, true, false, 
false); 

002 this.Animation_initialize(spriteSheet); 

003 this.gotoAndStop("idle"); 

004 window.Hero = Hero; 

005 }(window)); 

Crate expectations 

Save the file as 'Hero.js’, and again create another 
JavaScript file. This one is going to hold the falling crates 
that will try to knock our little player off the platforms. 

As done previously we set up our crate as an object 
that we can instantiate many crates from when the 
game is running. 

001 (function(window) { 

002 function CrateQ { 
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HTML5 document 

Create a new HTML5 page in Dreamweaver and 
add the code below, so we have a canvas element, 
within which we can display our game. We also add an 
init function, which is called when the document loads. 
Save this as 'index.htmr in the same folder as the crate, 
hero and platform. 

001 cbody onload="init();”> 

002 <canvas id="canvas" width="960px" 
height=’’600px"x/canvas> 


i 


For loops 

Anything that has to be 
done over and over again 
should be put into a ‘for’ 
loop so that it can iterate 
through a sequence. 
Arrays are normally used 
to hold the data. 


k 


be black but then links to the main EaselJS library and 
to our code we created in the previous steps. We can 


003 this.initialize(); 

004 > 

Container for the crate 

The crate is going to become a container that is 
an empty display object in EaselJS. We are then going 
to place an appropriate game image into the crate, 
which will then allow us to move the image to the 
centre point of the container, and therefore do our 
collision detection from that centre point when it is 
finally placed within the game. 


001 Crate.prototype = new Container(); 

002 Crate.prototype.img = new Image(); 

003 Crate.prototype.Container_initialize = 


Link to code and style 

Add the following code in the head section of 
the site. This just styles the background of the page to 


now access any of these from within this file so we can 
construct our platform game. 

001 <style>body {background-color: #000;}</ 


Crate.prototype.initialize; 

004 Crate.prototype.initialize = function() { 

Finish the crate 

Here is where we add the crate image, and we 
are going to have to move it back 20 pixels on the X 
and Y axes so that the centre of the crate is over the 
middle of the container - this is an important step so 
don’t forget to do it. This is then added to the object 
and can be called as new CrateO in the game. Now save 
this file as ’Crate.js’ in the same folder as the others. 

001 this.Container_initialize(); 

002 var bmp = new Bitmap("img/crate.jpg”); 

003 bmp.x=-20; 

004 bmp.y=-20; 

005 this.addChild(bmp); 

006 } window.Crate = Crate; 

007 }(window)); 



<Above> 

• The key handlers register the user’s key presses in the 
final game pictured above. These are the link between 
user input and making the character behave as it 
should on the screen 


style> 


002 <script 
003 <script 
004 <script 
005 <script 


src=”lib/easel. js”x/script> 
src=”Platform. js"x/script> 
src=”Hero. js”x/script> 
src=”Crate. js"x/script> 


Generating some variables 

We need quite a lot of variables to work our 
project because there are various elements that we are 
going to need constant access to. Here we hold the 
cursor and space key codes in variables so that we can 
have access to them in the game as well as elsewhere. 
The next line just holds various objects we need to use 
within the game. 

001 <script> 

002 var KEYCODE_SPACE = 32, KEYCODE_LEFT = 37, 
KEYCODE_RIGHT = 39; 

003 var canvas, stage, lfHeld, rtHeld, 
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Creating the 
spritesheet 


Sprite sheets for EaselJS could be a bit 
of a pain to put together if you had to 
do the job in Photoshop by hand. 
Aligning all those images and making 
sure the animation is correct would 
make the process very difficult. 
Thankfully the creator of EaselJS, 
Grant Skinner, has a standalone tool 
called Zoe for converting Flash 
animation into a sprite sheet. Flash is 
an amazing animation tool with its 
onion skinning, drawing and 
inbetweening tools. Just export your 
SWF with frame labels to define when 
individual animations begin, and Zoe 
can convert your SWF into a 
transparent PNG with a little 
JavaScript file that denotes the frame 
size, length of frames, etc. Zoe runs 
under the Adobe AIR framework and 
is available for free download from 
easeljs.com/zoe.html. 


001 

var img = new Image(); 

007 

dimg.src = "img/door.jpg"; 

002 

var bgimg = new Image(); 

008 


003 

var kimg = new Image(); 

009 

img.onload = this.handlelmageLoad; 

004 

var dimg = new Image(); 

010 




011 

img.src = "img/hero.png"; 
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Numerical arrays 

012 

} 


The next code we add creates three arrays of 
data that position platforms on the X and Y axes, and 
then adds a width. So the first platform will be 
positioned at 40px from the left of the screen and 
460px down the screen with a width of 300px. The 
final two lines will register key listeners for user input 
via the keyboard. 

001 var platformW = [300, 100, 180, 260, 

260, 100, 100]; 

002 var platformX = [40, 220, 320, 

580, 700, 760, 760]; 

003 var platformY = [460, 380, 300, 

250, 550, 350, 450]; 

004 document. onkeydown=handleKeyDown; 
005 document. 

onkeyup=handleKeyllp; 


Array variables 

Array variables hold 
multiple values instead of 
just one value. If you 
imagine your standard 
variable as a plastic 
container, then an array 
would be a bit like an ice 
cube tray with many slots, 
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When loaded... 


platforms, crates, hero, heroCenter, key, 
door, gameTxt; 
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Game states 


If you’ve come to JavaScript from other 
languages such as ActionScript, you will notice that 
JavaScript can create multiple variables on one line, and 
in the case of the next code, also assign values to them. 
Here we are assigning various states to our game - for 
example, whether our player is jumping or in the air. 

001 var keyDn = false, play=true, dir="right"; 
002 var loaded =0, vy = 0, vx = 0; 

003 var jumping = false, inAir = true, gravity 
= 2 ; 

Hold the images 

We’re adding four images to our game so we set 
up variables to hold them. These are for the hero image, 
background image, key image (which will have to be 
collected by our character) and then a door image 
which will be unlocked when the hero collects the key. 


When the page loads, 
the init function is called so 
} we add that here. This 
| makes reference to our 
► canvas, sets it up and 
f adds an EaselJS stage to 
p it. The stage is very similar 
to the stage in Flash and 
^ gives us a display list of 
objects that is managed by the 
stage. So anytime we want to add 
anything, we use addChild just like in Flash. 

001 function init() { 

002 canvas = document. 
getElementById("canvas”); 

003 stage = new Stage(canvas); 

004 bgimg.onload = this.handlelmageLoad; 

005 

006 bgimg.src = "img/scene.jpg”; 

Handle the images 

The four images we want to load need to be 
checked to see if they are loaded before we continue. 
To do that, we send each one to the handlelmageLoad 
function, which we will add to the code in the next step. 
This simply registers each image to call that function 
once it has been loaded. 

001 kimg.onload = this.handlelmageLoad; 

002 

003 kimg.src = "img/key.png"; 

004 

005 dimg.onload = this.handlelmageLoad; 

006 


Note each image 

Here is the handlelmageLoad function. It adds a 
number to the loaded variable each time an image is 
loaded. If the number equals four then all four images 
must be loaded and so it calls the start function. This 
acts as a preloader and will not display anything until 
those four images are loaded. 

001 function handlelmageLoad(event) { 

002 loaded+=l; 

003 if (loaded==4){ 

004 start (); 

005 } 

006 } 

007 

In the right direction... 

Now we add the function for if certain keys are 
hit. We register the key being pressed with IfHeld or 
rtHeld then set a direction variable that will control 
which animation to play. The Spacebar calls a special 
jump function - moving the character upwards. 

001 function handleKeyDown(e) { 

002 if(!e){ var e = window.event; } 

003 switch(e.keyCode) { 

004 case KEYCODE_LEFT: IfHeld = true; 
dir="left"; break; 

005 case KEYCODE_RIGHT: rtHeld = true; 
dir=”right"; break; 

006 case KEYCODE_SPACE: jump(); break; 

007 } 

008 } 

009 
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Key released 


When the key is released we need to stop 
certain animations from happening, and register that a 
key is no longer being held. We also stop the relevant 
animation from playing and switch to an idle pose. Now 
save the document ready for the next tutorial, when we 
will add all of the game logic to the project. 

001 function handleKeyUp(e) { 

002 if(!e){ var e = window.event; } 

003 switch(e.keyCode) { 

004 case KEYCODE_LEFT: IfHeld = false; 
keyDn=false; hero.gotoAndStop(”idle_h"); break; 
005 case KEYCODE_RIGHT: rtHeld = false; 
keyDn=false; hero.gotoAndStop("idle"); break; 
006 } 

007 } 

008 </script> 
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Get to 
grips with 
WordPress 
taxonomies 

The lowdown on what taxonomies are 
and how to use them in your blog 

tools I tecli I trends WordPress, PHP, Dreamweaver 
expert Pete Simmons 




All Posts 
Add New 
Categories 
Tags 

Genres 

<Above> 

• The Admin section of WordPress 
displaying our new Genres category 
powered by our custom taxonomy 


o what is a taxonomy? Well, put simply 
it's a collection of elements that share a 
common feature or characteristic. For 
example, if you divide your fruit bowl up 
based on the colour of the fruit, you can 
assign each group a taxonomy in order to 
define them. In the blogging world this 
would manifest itself as a group of similar 
blog posts; in this particular example we 
will be using music genres, but of course 
it can be applied to any topic you like, whether it’s types 
of recipes, film genres or holiday destinations. 

Rather than using the standard categories tag in our 
WordPress blog, we’ll be defining the taxonomies in our 
theme’s function.php file. This file contains all the 
additional features that are seen in our theme, but do 
not come as standard in WordPress. If you are unsure 
how a WordPress theme works, it may be worth doing a 
little research around custom themes (see WD, issue 
191). We’ll cover the basics in this tutorial, but there may 
be some areas which may require some prior 
knowledge of the way a WP theme works. 

We'll be working with a local test server and a clean 
install of WordPress, so if you haven’t done so already, 
download and install XAMPP and get WordPress up and 
running. For a step-by-step guide on how to set up your 
development server locally, visit bit.ly/gNjZG, 


Rather than using the standard 
categories tag in our WP blog, we’ll define 
taxonomies in our theme’s function.php 


Get to know WordPress 

To get going you should have your local server 
up and running via XAMPP, and a clean version of 
WordPress installed. If you don't, see the link in the 
introduction of this tutorial. Navigate to your WordPress 
site at localhost/WordPress to ensure that everything is 
working as it should be, then log in to the backend and 
add some test posts. 

Inside WordPress 

Now we have WordPress up and running it’s 
worth mentioning the way the functions.php file works. 
This file is placed inside your theme directory and 
serves theme-specific functions to your blog. First, open 
up the default functions.php file for the TwentyEleven 
theme from the WordPress/wp-content/themes/ 
TwentyEleven folder. 

The first taxonomy 

Within the functions.php file, add the following 
lines of code at the bottom of the file and then save. If 
you now navigate to the WordPress backend you will 
see our new Genres subcategory has been added to 
the Posts menu item. The add_action line of code 
below will make sure that the taxonomy is registered 
on the page load. 

001 register_taxonomy('genre', 'post', array( 
002 'hierarchical' => false, 'label' => 
'Genres', 

003 'query_var' => true, ’rewrite’ => true)); 

004 

005 

006 

007 add_action( 'init', 'add_custom_ 
taxonomies’, 0 ); 

What did that mean? 

Now we’ll look a bit deeper at the code from the 
previous step and explain what it means. The register, 
taxonomy property takes in several values in order to 
set everything up; these are ’name’, ’type’ and 
‘arguments’. Name is simply the title of the taxonomy, in 
our case Genres. Type, meanwhile, is post as that is 
where we want to use our taxonomy. 

Ready for an argument 

You may also notice that the register.taxonomy 
function takes in a third value; in this case it’s an array of 
arguments that customise the way our taxonomy is 
displayed. By changing that array to the following code, 
we will make things a lot neater in the future. 

001 function add_custom_taxonomies() { 

002 

003 register_taxonomy('genre', 'post', array( 
004 

005 'hierarchical' => true, 

006 

007 'labels' => array( 
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<Left> 

• Now we can add in our various music genres. 
You can see we have a hierarchy in place, based 
on music theme 

< Above, top lo bottom > 

• When adding a new blog post our taxonomies 
are displayed in the left-hand column, allowing 
for easy selection 

• The taxonomy list is now displayed on our 
single post blog entry 


008 

009 'name' => _x( 'Genres’, 'taxonomy general 
name' ), 

010 'singular_name' => _x( 'Genre', 

'taxonomy singular name' ), 

011 ’ search_iterns' => ( 'Search 

Genres' ), 

012 ’all_items' => _( 'All Genres' 

), 

013 ’parent_item' => _( 'Parent Genre' ), 

014 'parent_item_colon' => ( 'Parent 

Genre:' ), 

015 'edit_item' => _( 'Edit Genre' ), 

016 

017 'update_item' => _( 'Update Genre' ), 

018 'add_new_item' => _ ( 'Add New 

Genre’ ), 

019 'new_item_name' => _( 'New Genre 

Name' ), 

020 ’menu_name’ => _ ( ’Genres' ), 

021 
022 ), 

023 

024 'rewrite' => array( 

025 'slug' => 'Genres', 


026 

027 'with_front' => false, 

028 'hierarchical* => true 

029 ), 

030 

031 )); 

032 } 

Set up the taxonomies 

Now our taxonomies are showing up in the Post 
section of our WordPress site we can set up some 
categories. Add as many as you need to, but for our 
example we will be breaking our genres down into 
electronic and rock music, with subcategories of each. 

Write a post 

Next, with the taxonomies in place, create a new 
blog post in WordPress. You will see that our new 
categories are displayed in the right-hand side of the 
page; assign the blog post to the new category and 
publish it. You will notice that there are taxonomies not 
being used in the frontend yet. 

Display taxonomy data 

Open ‘content-single.php’ from your default 


theme folder and add the following code within the 
loop. In this example, the best place to position this 
code is right after the <div class="entry-content”> div 
tag. Save the file and view your newly created blog post 
to see your taxonomy data. The list variable outputs the 
data in a <li> format. 

001 <?php wp_tag_cloud( array( 

'taxonomy’=>'genre' , 'format’=>'list' ) ); ?> 

Create a tag cloud 

Now we have a way of accessing our data, let's 
create a sidebar widget that sits on the front page. This 
widget will display a tag cloud of the Genres taxonomy. 
Create a new file in the plug-in directory called 
‘taxonomy-sidebar.php’ and apply the following code. 
This sets the building blocks for our plug-in. 

001 <?php 
002 /* 

003 Plugin Name: Taxonomy Sidebar 
004 Plugin URI: http://localhost/ 

005 Description: Taxonomy Sidebar Plug-in 
006 Author: Your Name 
007 Version: 1 
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Rock Post 2 


<Far left, clockwise* 

• Our custom taxonomy sidebar is 
now in place, displaying the results 
in a tag cloud format 

• The same applies to adding CSS to 
your post list. In this example the 
taxonomies are styled inline 

• An example of a menu list that has 
been created by calling the custom 
taxonomy of Genres 


Rock 


PusUdO”M«UiM.»1t 



Dubstep 

Wc »!*0 00 March 30, 3012 
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008 Author URI: http://localhost/ 

009 */ 

displayTaxonomy function 

Now we have set our plug-in details, add the 
following code underneath and save the file. These 
lines of code are the foundations of the sidebar plug-in 
and grab the taxonomies. This sidebar also displays the 


displayTaxonomyJnit function 

Now we need to initialise the custom plug-in - 
this will ensure that the drag-and-drop box will be 
displayed on the Widgets page in our WordPress 
backend. Add the following code underneath the 
widget_displayTaxonomy function from the previous 
step. Save the file and go to your widget menu page at 
http://localhost//WordPress/wp-admin/widgets.php 


Practical uses 
for taxonomies 

Taxonomies are a great 
way to make an online 
store, breaking down 
products into different 
categories and allowing 
users to filter their 
results easily. 




taxonomies in size order, depending on how many 
posts there are for each one. 

001 function displayTaxonomy() 

002 { 

003 wp_tag_cloud( array( 'taxonomy' => 
'genre', 'number' => 45 ) ); 

004 } 

widget_displayTaxonomy 

function 

We now have the ability to generate a tag cloud from 
our taxonomies, but we still need to enable this in the 
sidebar. Add the following lines of code below that for 
the displayTaxonomy function. This will generate the 
sidebar code needed to display the tag cloud. 

001 function widget_displayTaxonomy($args) { 
002 extract ($args); 

003 echo $before_widget; 

004 echo $before_title;?>Taxonomies<?php echo 

$after_title; 

005 displayTaxonomy(); 

006 echo $after_widget; 

007 } 

008 


to see it in action. 

001 function displayTaxonomy_init() 

002 { 

003 register_sidebar_widget(_('Display 





Hock 


<Above> 

• By clicking on the taxonomy link we are able to filter 
just by that category 


Taxonomy’), 'widget_displayTaxonomy'); 

004 } 

005 

006 add_action(''plug-ins_loaded", 
''displayTaxonomy_init''); 

Add the widget 

You can now drag and drop your custom plug-in 
to your blog's sidebar from the widget screen. There will 
be no options for this widget as we have not coded 
them in; instead the taxonomies are determined from 
within our plug-in source code. Keep this in mind if you 
change your taxonomies in the future. 

Taxonomy menu sidebar 

So we've covered using taxonomies as a tag 
cloud; let’s now look at using them as a menu list. We'll 
be creating a second plug-in as before, but this time we 
will be using HTML to hard-code the menu item based 
on taxonomies. Create a new file called 'taxonomy- 
sidebar2.php' and add the following code: 

001 <?php 
002 /* 

003 Plugin Name: Taxonomy Sidebar Menu 
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Exploring WordPress’s 
built-in wp_tag_doud 
function 


The wp_tag_cloud function is built in 
to WordPress and allows us to quickly 
generate tag clouds, based on either 
taxonomies or categories. This 
function has a lot of flexibility in terms 
of customisation, taking in several 
variables to achieve this. 

These variables include: smallest 
and largest - which determine the 
smallest and biggest font size of a tag; 
unit - which takes in a font size value, 
such as pt, px, % or em. Also included 
is number, which determines how 
many actual tags are displayed in 
your cloud. You can also set the way 
the cloud is displayed using the 
format variable - this can either be flat, 
list or array. Flat is the default cloud 
output but changing this to list will 
output <li> tags instead. 


able to query the genre taxonomy and load the results. 
The code will also prevent an empty taxonomy from 
being displayed. These results will be stored in the 
Sgenres variable as an array. We also include the start 
of our <ul> in this step. 

001 Sgenres = get_terms('genre’, 'hide_ 
empty=l'); 

002 

003 echo ’ <ul>'; 

The first loop 

We will now create our first loop that will output 
the rest of the menu. The loop takes the array we 
created in the last step, and formats the contents 

^correctly in order to be part of the list. Add 
^Jhe following foreach loop under the 
code from step 16. 


Moving themes 


001 foreach( Sgenres 
as Sgenre ) { 

002 
\ 003 

| echo '<li><a href='". 
_ get_term_link( 

| $genre->slug, 'genre' 

P ). . Sgenre- 

>name.'</ axul>’; 
004 

Swpq = array( 'post_type' 
=> ’genre', 'taxonomy' => 'genre', 
'term’ => $genre->slug ); 

005 $genre_posts = new WP_Query (Swpq); 


It’s worth noting that a lot 
of what has been covered 
will need to be replicated 
when switching themes; 
you may have to redefine 
your taxonomies in each 
theme’s function.php file. 


004 Plugin URI: http://localhost/ 

005 Description: Taxonomy Sidebar Menu 
006 Author: Your Name 
007 Version: 1 

008 Author URI: http://localhost/ 

009 */ 

Create the menu 

Now that we have our second plug-in set up. 
add the following code underneath the previous step. 
Essentially this will generate our plug-in and enable us 
to start coding the <ul> block that will hold our data. The 
h3 tag is the title of the sidebar menu; change this to 
whatever you need to display. 

001 function displayTaxonomy() 

002 { 

003 echo'<li id=''music-genres" class="widget- 
container"> 

004 <h3 class="widget-title'’>Music 

Genres</h3>' 

Query the taxonomy 

By adding the following code in the 
displayTaxonomy function after the last step, we are 


Thesecond loop 

Within our first loop, we will add another foreach 
statement. As before, this will cycle through the 
contents of an array and will then output the correct 
HTML to be used by our menu. Add this code under 
the previous step and save the file. 

001 foreach( $genre_posts->posts as $post ) { 
002 echo ’<lixa href=’”. 

get_permalink( $post->ID $post->post_ 

title. ’</ax/li>’; 

003 } 

Close the loops 

Now we have both of our loops in place, we 
need to add the last piece of code to this function. The 
following code will close off both the loops and add the 
final HTML elements that will close the <li> and <ul> 
tags. Once again, add this under the previous code. 

001 echo '</ulx/li>'; 

002 } 

003 echo '</ulx/li>'; 

004 
005 } 

006 


Format the sidebar 

As before we need to format our sidebar. You 
can copy and paste the code from the previous plug-in 
you created, and add it in underneath the 
displayTaxonomy function. Again, this code tells 
WordPress what it needs to output before and after it 
calls the displayTaxonomy function just created. 

001 function widget_displayTaxonomy($args) { 
002 extract (Sargs); 

003 echo $before_widg 

004 echo $before_title;?>Taxonomies<?php echo 
$after_title; 

005 displayTaxonomy(); 

006 echo $after_widget; 

007 } 

Register the sidebar 

Once more we need to add the function to 
register the sidebar. Again, for convenience, you can 
copy and paste this from the previous step. Be sure to 
change the name of the widget in this step, so that you 
can distinguish between the tag cloud widget you 
created previously and the new menu widget. Apply 
this beneath the code from step 20. 

001 function displayTaxonomy_init() 

002 { 

003 register_sidebar_widget(_('Display 

Taxonomy Menu’), ’widget_displayTaxonomy'); 

004 } 

005 

006 add_action("plugins_loaded”, 
'’displayTaxonomy_init''); 

007 } 

008 } 

009 

Add the new widget 

Save the plug-in file in the plug-in directory and, 
as before, activate it from within the WordPress Plugins 
page. Once it has been activated, you can simply drag 
and drop your new menu into your blog sidebar via the 
Widgets page. Clicking a link from this menu will show 
a list of all the relevant taxonomies. 



<Above> 

• From here you can add custom CSS to style your menu 
correctly; here we have added indents and arrows 
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How to make 
a one-page 
website work 

We share techniques and styles to 
maximise the impact of those landing 
pages, linking to your online portfolio 

tools I tecli I trends Photoshop expert Adam Smith 
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he one-page website is so hot 
right now. In a time where social 
media sites are peaking and 
web-design costs are not always 
kind to new designers, these 
creative landing pages are a 
godsend. The one-page website 
allows readers to learn everything 
they need in one friendly 
soundbite. Of course, limited space 
comes with its own set of obstacles, but there are 
several tools that will ensure a successful outcome. 

Photoshop does its utmost to complement web 
design, and in this tutorial we’ll show you the essential 
tools and palettes to produce cool results. You, as the 
designer, have the power to direct the visitor’s eyes. 
People naturally notice big things first, so your use of 
font style and scale is also fundamental; here is where 
you can marry the Type tool with layer masks and the 
Brush tool to create visual impact. Colour swatches let 
you apply unifying tones, and all other effects are 
geared to help you make a professional first impression. 


64 


tutorials 





























I-Iow to make a one-page website work 



Template guidelines 

We will be working with some detailed Photoshop effects, so we'll start with a template two times larger than 
the standard !200px width x !650px height, using 2,400 x 3,300px instead. We could go through all the ruler 
measurements, but to save time, simply open the 'Section template.psd' from the cover CD and match them up 
personally. To activate your rulers press Cmd/Ctrl+R. Double-click the ruler to open the Units & Rulers preference, 
setting Rulers to Pixels, understanding clearly set measurements in relation to image size. 


Work in progress 

Build up your 
promotional page 



Step 6: The basic layout 


midaMouch 



W 4 



Super-dean styling 

Every good one-page website needs a visual 
anchor, be it photo, logo or type based. For this 
example, we're aiming for a postmodern style, 
introducing a Mac screen we photographed ourselves. 
This will inspire additional visual elements, co-ordinating 
within our super-clean space. Simply select your 
monitor with the Pen Path tool and copy and paste into 
a new layer (Cmd/Ctrl+J). You may find a few haloes 
appearing on your screen's edges, so Ctrl/right-click 
your monitor copy layer thumbnail, create a new layer 
and paint to the edges with a 5% soft black brush. 



Maximise exposure 

Merge effects and copy and paste your monitor 
into your image. Before re-scaling make this 'monitor' 
layer a Smart Object, as this allows you to transform 
without losing the original image resolution quality. This 
is a general rule we'll adhere to with all our floating 
elements. To do this simply Ctrl/right-click your layer, 
selecting Convert to Smart Object. Once you're done 
resizing, make a selection of your Main Slide (see 
‘Sections template.psd’) area using the Rectangular 
Marquee tool, and centralise using Align Vertical and 
Horizontal Centres options (in the Move tool). 


Step 14: Add in type 
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We’re all tempted to include the odd 
cool font style, but web-safe fonts are 
essential when it comes to legibility. 
They’re present on a wide range of 
computer systems, used by web 
content authors to increase the 
likelihood that info is displayed in 
their chosen font and not scrambled. 


Replace the screen 

Open your Smart Object window 
to find a new monitor document. Here 
we can apply layers and updates to our 
main image. Start by pasting in an image 
that will replace your rather bland- 
looking monitor screen, testing the visual 
space. Select the monitor screen using 
the Rectangular Marquee tool and apply 
a layer mask to your image layer. Now 
deactivate the link layer lock and, with 
your image layer thumbnail active, 
reposition and scale within the 
boundaries of your mask. Next apply two 
separate Curves adjustment layers. 




Painting with Curves 

Set your first curve layer with Output 30. Input 85 values, naming this 
‘Shadows’. Then set the second curve with Output 90. Input 70 values, naming this 
‘Highlights’. Invert both of these masks and then paint them with 5-20% soft white 
brushes to create the effect of a stronger exposure on the shell of your monitor. We’ve 
also applied a Hue/Saturation layer, decreasing the Saturation to -65, hereby 
eradicating the blue colour cast of our photo. Set the blending mode of the highlight 
curve layer to Screen, at around 80% Opacity. 


06 Gradient texture 

Create a new layer beneath your monitor layer, then open your Swatches 
palette and load the Charcoal Hot Blue preset from the magazine resource CD. Select 
the Color Picker and click Swatch 2 (#e6e6e5) making it your set foreground colour, 
then Swatch 3 (#272827) making it your set background colour. Select the Gradient 
tool, set to Radial and apply from the top to the middle of your new layer. Reduce 
Opacity to 50% and Fill to 70%. Go to Filter>Texture>Grain, applying an Intensity of 11 
and Contrast of 40. with the Grain Type set to Regular. 



your monitor Smart Object layer. With your foreground 
colour active, set your brush blending mode to Screen 
at 40% Opacity. Use a large soft brush and apply 
several times to create a glow effect, though nothing 
too harsh. If banding arises, remedy by erasing with a 
layer mask. Open your monitor Smart Object and 
duplicate your Monitor layer, applying a Color blending 
mode and the same Grain settings as in step 6. 



os Drop shadows 

Select lmage>Canvas Size, setting Height at 
2,100px. Duplicate your Monitor layer and send to back. 
Squash the height using Transform>Scale, correcting 
perspective using Transform>Perspective. Apply 
Gaussian Blur with a 12px Radius, then a layer mask and 
fade the edges with a 10% soft black brush dropping 
the layer Opacity to 20%. Draw out screen reflection 
using the Pen tool - Opacity to 10%. Rasterize and use a 
layer mask to integrate the outside and bottom edges. 


Cut-out type 

Type your header (Type tool, 200pt size), using 
the Swatch 5 tone (#30c0f0). We’ve used Lobster 1.4, 
from Google Web Fonts. Centralise as in step 3. Ctrl/ 
right-click your type layer thumbnail, then select the 
Marquee tool, tapping Down and Right three times and 
Cmd/Ctrl+Shift to invert. Create a new layer called Type 
Shadow, then paint it using your Swatch 3 tone 
(#272827) with a soft brush, at 50% Opacity. Ctrl/ 
right-click the type layer thumbnail once again. 
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The folded badge style seems as 
popular as Web 2.0. This can be 
simply circular or more diverse using 
custom Photoshop shapes. For now, 
here are the basics to get you started. 
Select the Ellipse tool and draw out 
your circle. Rasterize then make a 
selection of one section of your shape, 
before copying and pasting into a new 
layer. Rotate this -100% and apply a 
Drop Shadow layer style at a 
-50-degree Angle, 50% Opacity, 
Distance of 20px and Size of 54px. 
Lastly, apply an Inner Shadow layer 
style to the main shape, setting a 
-50-degree Angle at 50% Opacity, 
Distance of 4px and Size of 62px. 



T W » 


Service and icons 

We’ve used the royalty-free Hydro Pro V2 pack, 
created by mediadesign.deviantart.com. Copy and 
paste icons into the icon sections of your template, 
transforming to Smart Objects before rescaling. Use 
web-safe fonts for type - including Georgia, as applied 
here. The smallest detail counts, so duplicate all three of 
your icons and merge only these into a single layer, 
called Icon Shadow. Use Edit>Transform>Scale to 
squash this layer vertically, press Cmd/Ctrl+U and lower 
Lightness to -100, applying a 5px Radius Gaussian Blur. 






Scroll buttons 

Ctrl/right-click all your related type layers and 
then convert to a Smart Object, calling this layer 
‘Header’. Next activate the Custom Shape tool, choosing 
the Arrow 9 preset. Draw out one arrow and then drag 
a Ruler guide to 800px vertically. Line up your arrow 
shape as shown in the screenshot. It should snap to 
your guides if this option is activated. Duplicate and 
Edit>Transform Path>Flip Horizontal, positioning on the 
adjacent side of your guides. These act as scroll buttons, 
activating the image reel on your screen. 



Type detail 

Delineation is key, so apply a white outline, as 
per step 10. to your main type. Simply duplicate your 
text layer, place the duplicate in behind, change the 
colour to white and click the Left keyboard arrow key 
twice, lowering the Opacity to 20%. Make sure that the 
type on top consists of one of your swatch tones - 
we’ve applied Swatch 3 colour (#272827). Set a Ruler 
guide to 1,200px, Shift-click all associated icon and type 
layers, and drag to centralise - matching your centre 
point with this Ruler guide. 


Create depth 

With your Type Shadow layer active, apply a 
layer mask, effectively isolating the effect within the 
boundary of your font. Ctrl/right-click your type layer 
thumbnail, select Filter>Blur>Gaussian Blur, applying a 
4px Radius. Ctrl/right-click the type layer thumbnail 
again and invert selection, creating a new Outline layer, 
zooming in at 300%. Select a white hard brush at a 2px 
size, applying to the right outside edge of the font. This 
is the finishing touch in creating depth in your simulated 
cut-out type - a small but essential addition. 



Complementary visuals 

With these buttons in place you can proceed to 
apply the same effects as in steps 9 and 10 individually 
to each arrow icon. However, this time apply Filter> 
Blur>Gaussian Blur at a 2px Radius before transforming 
both to individual Smart Objects. Every good one-page 
website needs to tell people about what you do with the 
least amount of detritus possible, and this can be 
achieved through cool visual cues. Symbolic vector or 
vexel-illustrated icons go a long way in harmonising a 
graphical and clean-looking page. 



Additional Info 

Create an Additional Info space in the related 
template space by drawing out a Swatch 3 (#272827) 
colour shape, using the Rectangle Shape tool (U). Select 
Bevel and Emboss from the Layer Styles menu (fx), 
setting a Chisel Hard Inner bevel, with a Depth of 430%, 
Size of Ipx and Highlight Mode Opacity at 20%. Also 
apply a Ipx Size Centre Position black-coloured Stroke. 
Duplicate this layer and drop it to the foot of your space, 
resetting Highlight Mode Opacity to 30% and Stroke 
Size to 3px. Now you can add any extra information. 
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Create an eCommerce carousel with jQuery & XML 


Create an 
eCommerce 
carousel with 
jQuery & XML 

Make a content loop that can be used 
to enhance any online store or gallery 

tools I fecit I trends Dreamweaver, jQuery, XML 
expert Neil Pearce 


ebsites today have become more than 
just static pages that do nothing. We are 

: used to seeing almost all modern 

websites with at least some kind of 
: animated interaction for the user to play 

:::::::: with. eCommerce websites, for example, 

will almost always - by their nature - need 
to hold a lot of products, possibly within a 
small section of the page. So what better 
solution than to have an image slider or 
carousel that not only allows the user to look at the 
product, but also to read all about it without having to 
leave the page? The idea in this tutorial is to have some 
content boxes that we can slide infinitely (in a circular 
motion), and when the 'Read more’ link is clicked, the 
respective item moves to the left and a new content 
area will slide out showing more information about this 
product that gets loaded in by XML 
Then we can navigate through the carousel where 
each step will reveal the next or previous content box 
with its expanded content. Clicking on the closing cross 
will slide the expanded content area back in and 
animate the item to its original position. We are going to 
use a jQuery plug-in that has already been written, but 
we will play around with the settings to customise it 
further, and towards the end look at a simple way of 
loading external data using XML. 

What better solution than a carousel 
that lets the user examine and read about 
the product without leaving the page? 



<Abov«> 

• The content wrapper which will be 
hidden until the Read more button is 
clicked. Notice we have left the 
content-text class empty 



Getting ahead 

The first thing you need to do is open a new file 
in your chosen text editor using the new HTML doctype 
and add in the paths to the stylesheets. Here we are 
using Google Web Fonts to load in the Lobster type, but 
what you use here is completely up to you. 

001 <head> 

002 <title>Content Carousel with jQuery 

&amp; XML</title> 

003 <meta charset=”UTF-8'’ /> 

004 

005 <!— CSS --> 

006 clink rel="stylesheet" type="text/css" 
href=”css/style.css" /> 

007 <!— Google fonts —> 

008 

009 clink href='http://fonts, 

googleapis.com/css?family=Lobster' 
rel=’stylesheet' type='text/css'> 

010 c/head> 

Main container 

What we are going to do here is add in our main 
container so we can centre the whole thing. Next, using 
the HTML5 header tag. we’ll insert our main header title. 
We then make a container id so we can use that as a 
hook for our jQuery. followed by a class container and a 
class wrapper for us to hook to using CSS. 

001 cdiv class="main-container”> 

002 

003 cheader class=''header"> 

004 chl>Content Carousel with 

cspan>jQuery &amp; XMLc/span>c/hl> 

005 c/header> 

006 

007 csection id="container" 

class="container”> 

008 cdiv class=’’wrapper"> 

009 

010 

011 c/div>c!— END wrapper --> 

012 

013 c/sectionx!— END container -> 

The item content 

Now we need to add in the markup for the item 
within the wrapper div. We are going to create several 
items so we need to give it a class of item as well as 
another class - item-1. Then within this, everything else 
is pretty much self-explanatory, but one thing to note is 
the empty div with a class name of img. This will be 
used in a later step with the CSS to include images of 
the products that you wish to display. 

001 cdiv class="item item-r'> 

002 

003 cdiv class=''item-main"> 

004 cdiv class=”img">c/div> 
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005 <h3>Imagination is powerful</h3> 

006 <p class="price">£19</p> 

007 <h4> 

008 <span class="quote">&ldquo;</ 

span> 

009 <span>Imagination is more 

important than knowledge.</span> 

010 </h4> 

011 <a href="#" 

class="more”>more...</a> 

012 

013 </divx!— END item --> 

The inner content 

Now we are going to add in the markup for our 
inner content. When the Read more button is clicked, it 
will slide open to reveal this content that, in a later step, 
will be populated by XML. This HTML should sit so it is 
positioned just underneath the item content, and again 
it includes many empty classes that we will be using in 
future steps to hold the CSS code. 


001 <div class="content-wrapper”> 

002 <div class="content"> 

003 <h6>Imagination is key to being</h6> 

004 <a href="#” class="close”>close</a> 

005 <div class="content-text”> 

006 </divx!— END content text —> 

007 <ul> 

008 <lixa href="#”>Read more</ ax/li> 

009 </ul> 

010 </div><!— END content —> 

011 </divx!— END content-wrapper —> 

Another item 

What you need to do now is duplicate the item 
markup (both steps 3 and 4) as many times as you 
want. In this tutorial we have created eight items, all with 
their own class names - item-2, item-3, item-4 and so on; 
everything else can be left as is. 

001 <div class=’’item item-2”> 

002 <div class=”item-main”> 


003 <div class='’img"x/div> 

004 <h3>Make mistakes to learn</h3> 

005 <p class="price">£29</p> 

006 <h4> 

007 <span class="quote">&ldquo;</span> 

008 <span>Anyone who has never made a 

mistake has never tried anything new.</span> 

009 </h4> 

010 <a href=”#" class=''more”>more.. .</ 

a> 

011 </divx!— END item —> 

012 <div class="content-wrapper’’> 

013 <div class="content"> 

014 <h6>Have you made mistakes?</h6> 

015 <a href=’’#" class=”close”>close</a> 

016 <div class="content-text"> 

017 </divx!— END content text —> 

018 <ul> 

019 <lixa href="#”>Read more</aX/li> 

020 </div> 

021 </div> 

022 </div> 

Start the CSS 

In this step we will begin adding in our CSS code. 
As usual we start with a reset, but you may want to use 
the reset of your choice as this one is quite outdated 
and not really recommended any more. Then we make 
HTML5 elements display block-level to achieve 
consistent styling and add in a background image. 
Finally we centre the main-container with a top and 
bottom margin set to a value of 20px. 

001 *{ 

002 Margin: 0; 

003 Padding: 0; 

004 } 

005 section, aside, footer, header { 

006 display: block; 

007 } 

008 body { 

009 font: 12px/18px Arial, sans-serif; 

010 margin: 0; 

011 padding: 0; 

012 color: #43200d; 

013 background: url(’../imgs/bg.png'); 

014 } 

015 .main-container { 

016 width:990px; 

017 margin: 20px auto; 

018 } 

Carousel styles 

With the carousel styling, we are going to be 
using a lot of positioning. So when we position an 
element relative, anything inside that element can then 
be positioned ‘absolutely’ anywhere inside - as we did 
with the close and Read more buttons. Lastly we apply 
a touch of CSS3 using box-shadow to give it a more 
sophisticated finish. See the full code on the disc. 
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001 .close{ 

002 position:absolute; 

003 top:10px; 

004 right:10px; 

005 background:#fff url('../imgs/cross.png') 
no-repeat center center; 

006 width:27px; 

007 height:27px; 

008 text-indent:-9000px; 

009 outline:none; 

010 -moz-box-shadow:lpx lpx 2px 
rgba(0,0,0,0.2); 

011 -webkit-box-shadow:lpx lpx 2px 
rgba(0,0,0,0.2); 

012 box-shadow:lpx lpx 2px rgba(0,0,0,0.2); 
013 opacity:0.7; 

014 } 

The item images 

Now let's add in our item or product images by 
using CSS. First of all we give the close button a hover 
state using the opacity setting, and the item-main is our 
background that is positioned absolutely with anything 
hidden that overflows. Next we include the image we 
want using the img class, before using the same image 
for the other items. Again, the full code is on the CD. 

001 .close:hover{ 

002 opacity:1.0; 

003 } 

004 .item-main{ 

Google Web Fonts 

What we need to do now is to style our titles 
with a Google Web Font called Lobster. Go to www. 
google.com/webfonts and do a search for the Lobster 
typeface. Once you have it you can include the link 
within the header (done in step 1) and include the CSS 
to the hi rule and item.h3 rule. You can then give them a 
nice subtle drop-shadow in order to keep things 
consistent. The complete step code is on the CD. 

001 hi { 

002 font-family: 'Lobster', cursive; 

003 font-size:30px; 

004 color: #333; 

005 text-shadow: 0px lpx lpx #fff; 

006 } 

Quote styles 

Now let’s add some styles to the quotes that sit 
at the bottom of each product. We’re using Georgia 
here (because it’s more readable), and give it a nice left 
border. We are going to give our quote a font-size of 
80px and keep the colour as subtle as possible. Now we 
can style our price tag and pull it up slightly using a 
negative top margin. The full code is on the cover disc. 

001 .item h4{ 

002 font-family: "Georgia","Times New 



Lcnlerd Carousel with/Query & 

Imagination b hey to being 



Imagination h powerful 

£19 


</\bove> 

• Here, the inner content title and 
Read more button are all styled 
and ready to go 


Roman",serif; 

003 font-style:italic; 

004 font-size:12px; 

Content wrapper 

Now we have the main carousel styling, we need 
to wrap things up by adding some styles to the inner 
content that slides into view once the Read more button 
is hit. We can style the background via the content- 
wrapper div and then make sure anything overflowing 
is hidden. Give the main content a width of 660px using 
the inner content class. Find the full code on the CD. 


Footer scripts 

Keeping your scripts at 
the bottom of your page 
is considered good 
practice, as it helps to 
speed up your page 
loading times. 


004 font-family: "Georgia","Times New 
Roman",serif; 

005 margin:10px 20px; 

Navigation arrows 


001 

.content-wrapperf 

002 

background:#dddf95; 

003 

position:absolute; 

004 

width:0px; 

005 

height:440px; 

006 

top:5px; 

007 

text-align:left; 

12 

Finish the content 

Let’s add the last lot of styles to our inner 

content. Here we size the text to 14px, and again use 
Georgia to keep it in line with the overall look of the 
carousel. Again we have used the Lobster font for the 
inner contents title. Finally, we style an unordered list 
(<ul>) that can be used for extra buttons located under 
the main text. The step code in full is on the disc. 

001 

.content-text{ 

002 

font-size: 14px; 

003 

font-style: italic; 


All we need to do now is add our navigation 
arrows to scroll through the carousel. The arrows are on 
the CD, but you can create your own for practice. We’re 
going to position them as absolute and apply a hover 
state with opacity. The full CSS is on the disc. 

001 .nav span{ 

002 width:25px; 

003 height:38px; 

004 background:transparent url('../imgs/ 
a mows, png') no-repeat top left; 

005 position:absolute; 

Get things moving 

Locate the ’js’ folder on the CD and save it into 
your own file directory. Then include these lines of 
script at the very bottom of the HTML markup, just 
above the closing </body> tag. What we have done 
here is include the jQuery library and the jQuery 
plug-ins within the js folder - these plug-ins are 
essentially going to control the carousel dynamics. 


70 


tutorials 















Create an eCommerce carousel with j Query & XML 



p;;-- 




Google Web Fonts lOl 


As we used Google Web Fonts, it 
would make sense to go over how to 
use them in more detail. So head over 
to www.google.com/webfonts and do 
a search for Lobster, then click the 
blue Add to Collection button to the 
right. Once this is added to your type 
library you can click the Use button 
which is located at the bottom- 
right of the page next to Review. Once 
this is selected you will be presented 
with a couple of options to customise 
the style of the font further. 

Now all we need to do is copy and 
paste the link that is supplied inside 
the head of our document, and then 
copy and paste the font-family that is 
also supplied to our CSS file. In this 
case we used the font for our header 
tags, but of course you can also do this 
with the main content paragraphs. As 
you can imagine, using web fonts 
ensures that any types you use will be 
visible by all users on all browsers. 




XML tag 
names 

Don’t forget to use your 
own tag names for your 
XML tag elements; that 
way you have full control 
of what can be used. 


The plug-in 

Open the ‘jquery.contentcarousel. 
js’ file in the text editor, and locate 
the settings variable. This is 
where you can change the 
speed of the carousel as well 
as the speed of the item 
animation when the Read 
1 more button is clicked. You will 
p' also notice we can control how 


001 <! — scripts —> 

002 <script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/ 
jquery/1.6.2/jquery. min. js"x/script> 

003 <script type="text/javascript" 

src=" j s/jquery. easing .1.3. js"x/script> 


15 


the easing works for both the 
carousel and item animations. The 


001 

full code a 

// speed for the 

an be found on the CD. 

sliding animation 

002 

sliderSpeed 

: 500, 

003 

// easing for 

the sliding animation 

004 

sliderEasing 

: 'easeOutExpo', 

17 

Atease 



As mentioned, we can make changes to either 
the sliding animation or item animation. So let’s have a 
little play with that and change the item animation 
easing from easeOutExpo to easeOutElastic. Then, to 
prevent it looking too bouncy, we can make it slightly 
slower by changing the item speed from 500 to 1,000 
milliseconds. Again see the disc for the complete code. 

001 // speed for the sliding animation 
002 sliderSpeed : 500, 

003 // easing for the sliding animation 

004 sliderEasing : 'easeOutExpo', 

005 // speed for the item animation (open 

/ close) 
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Introduce the XML 


XML is a very handy way of including content 
that is normally external. For instance, you can have an 
XML file located on a completely different server, but it 
can be linked to your project in a few ways. To begin 
with, let’s create a new file called ’contentxmr, which is 
basically the skeleton XML file. 


001 <?xml version=''1.0" encoding="utf-8''?> 

002 <channel> 

003 <item> 

004 <content> 

It’s a long-established fact that a viewer will be 
distracted by readable content on a page when looking 
at its layout. The point of using filler text like Lorem 
Ipsum is that it has a more-or-less normal distribution of 
letters, but unlike using something like ’Content here, 
content here’ will not distract the eye. 

005 </content> 

006 </item> 

007 </channel> 
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Include the XML 


In this step we are going to include the XML file 
using jQuery, which we will place inside our script tags 
and underneath the contentcarouselO function call. 
Here we have called the document.ready function and 
used the $.ajax method to fetch the content.xml file. On 
success we call the manipulateXml function that we are 
going to create in the next step. 

001 <!-- XML script —> 

002 $(document).ready(function(){ 

003 $.ajax({ 

004 type: "GET'', 

005 url: "content.xml", 

006 dataType: "xml", 

007 success: manipulateXml 

manipulateXml function 

Let’s create the manipulateXml function that we 
just called upon. Here we have an each loop that cycles 
through the XML file and finds the content tag. Then it 
stores the data inside a variable called body, and we 
then store the data of this variable inside another 
variable called output. Lastly we append the data to our 
content-text class, which is then displayed. 

001 function manipulateXml(data){ 


Activate the carousel 

Now all it takes to make the carousel work is to 
hook our plug-in to the Container id. If you open up 
your carousel in a browser, you should be able to see it 
in action. Plus if you click on the Read more option the 
inner content should slide open to reveal its main 
content. As it is, this will be empty, but we are going to 
populate it using an XML file in the remaining steps. 

001 <script type="text/javascript"> 

002 $( '#container') .contentcarouselO; 

003 

004 </script> 


001 

<?xml version=''1.0” encoding="utf-8"?> 

002 

$(data).find("item").each(function(){ 

002 

<channel> 

003 

var body = $(this).find("content"). 

003 

<item> 

text(); 

004 

<content> 

004 

var output = [ 

005 

</content> 

005 

"<p>" + body + "</p>”, 

006 

</item> 

006 

] 

007 

</channel> 

007 $(".content-text").append(output. 

join(”\n")); 

19 

XML content 

008 

aao T 

»; 


Now with the basic XML markup added, let’s 
incorporate the content we want to include - our items 
for sale. The topic of XML would take a whole tutorial 
on its own. but the tags in this markup are fairly 
straightforward. XML enables you to create your own 
descriptive tags, and the one we are most interested in 
is the <content> tag. So within the <content></content> 
tags, type in your product description text. 


Final thoughts 

Loading in the XML like this is great for one 
description only, but as it is, it’s not ideal. However, let it 
be a challenge for you to experiment with the jQuery 
and XML file to figure out how you can get different 
content relating to that specific product or image. 
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Need an inspirational site dissected? ) webdesigner@imagine-publishing.co.uk 


web workshop 

Angular designs 
with CSS3 rotation 

inspiration www.infinite-imaginations.com 



aying content out over 
angular or diagonal 
designs has long been 
possible in the print world; 
opening a copy of InDesign 
and grabbing the Rotate 
tool was all that was 
necessary. We’ve been 
sadly missing out in the online world 
for some time. Using Flash or creating a 
rotated image in Photoshop has been 
the only real way to handle this for a 


while, but now we have CSS3 and the 
revolution for rotating is upon us. 
Despite the buzz around CSS3 for 
some time now. there are still few 
examples of sites that are using the 
rotation property at all. 
Fortunately. Infinite 

Imaginations has 

experimented with the 
design of its homepage 
and it is definitely worth 
checking out. 


INSPIllM'ION 

Approach things 
at a new angle 

Design that is placed at an angle is 
considered by design principles to give a 
’more dynamic’ feel to the content. The 
reason being that when content is 
placed at an angle, the design is not at a 
state of rest like if it was horizontal and 
so it injects a feeling of movement. This 
idea was experimented with in Russian 
Constructivism and later the Bauhaus 
movement. These design ideas have 
been emulated many times since, 
and examples can be found in 
posters for Obama, Ocean’s 
Thirteen and much CD artwork. 
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Angular designs with CSS3 rotation 



<comment> 

What our 
experts think 
of the site 


Typography leads the design 

“I was already in love with Helvetica and had a fascination with typography art. 
I was developing and animating Flash websites back then and had the idea of 
animating the art in Flash. When that was successful, I tried converting it to 
HTML. Everything fell into place after that.” 

Nino Ross Rodriguez 



TECHNIQUE Create animated angled text 


Add some text 

The first step in re-creating the look of Infinite 
Imaginations is to create two div containers that will 
hold the words we want to rotate. You can make as 
many as you like but we’re keeping it to two for brevity. 

001 <div id="one”xhl>Headlining<br>Tod 
ay</hix/div> 

002 

003 <div id=''two''>This is the 
layout<br>you've been waiting for</div> 

Style up the content 

In the head section add the following code that 
sets up the CSS to rotate the first div tag. Notice that we 
use the rotate property of the transform to rotate the 
div tag. For simplicity, we’ve just included the webkit 
browser prefix, but add the other prefixes too. 

001 <style type="text/css"> 

002 #one{ 

003 -webkit-transition: all Is ease-in- 
out; 

004 -webkit-transform: rotate(-35deg); 
005 

006 width: 300px; 

007 

008 position: absolute; 

009 

010 top: -240px; 

011 left: 645px; 

012 opacity: 0; 

013 } 

Opposite rotation 

Now we add the CSS code to rotate the second 
div tag in the opposite direction. We have positioned 
the divs in this example with absolute values and we’ve 
made the opacity transparent so we can fade the div 
tag in with the jQuery in the next steps. 

001 #two{ 

002 -webkit-transition: all Is ease-in- 
out; 

003 

004 -webkit-transform: rotate(55deg); 

005 width: 300px; 

006 position: absolute; 


007 top: 660px; 

008 left: 640px; opacity: 0; 

009 
010 } 

Link to jQuery 

While we are still in the head section of the 
document, add the script link to the CDN-hosted jQuery 
library. We then set up our JavaScript to power the 
movement. When the document is ready, we then set 
up an interval that pauses for one second before 
sending in the first div tag. 

001 <script type=''text/javascript" 
charset="utf-8" src="http://ajax, 
googleapis.com/ajax/libs/jquery/1 .7.1/ 
jquery. min. js"x/script> 

002 

003 <script> 

004 S(document).ready(function() { 

005 

006 var intervall = setInterval(one, 
1000 ); 

Animate the content 

Here we use the jQuery animate function to 
move the first div tag into position and fade it up. When 
it has completed, it will fire the second function to move 
the second div tag so that they appear in order on the 
screen and fade up. 

001 function one(){ 

002 clearlnterval(intervall); 

003 

004 $('#one').animate({opacity: 1, 

left: '140', top: '110'}, 1000, 

'linear', function() { 

005 two(); 

006 }); 

007 } 

008 function two(){ 

009 $('#two').animate({opacity: 1, 

left: '300', top: '260'}, 1000, 

'linear', function() { 

010 }); 

011 } 

012 }); 

013 </script> 


TECHNIQUE 

Creating tiled 
patterns 

The Infinite Imaginations site uses some 
minimal graphics such as repeating angular 
lines. Creating these as tiles to fill div tags is 
a breeze in Photoshop and here we reveal 
how to set them up. 



Create lines 

9 Use the single column selection tool 
and select a column, then fill it with black. 
You now have a Ipx thick line. Copy and 
paste this, positioning equal distance apart 
until you have filled the document, then 
merge these layers together. 



Rotate the image 

Now choose Edit>Transform and 
then Rotate. Turn it by 45° and double-click 
to accept the change. Use the Edit> 
Transform>Scale tool and make it fill the 
vertical corners. Duplicate the layer and 
move it to fill the horizontal corners. 
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Define pattern 

Select the Crop tool and position 
over the pattern so you are left with a tiling 
pattern that will continue on each axis. Now 
choose Edit>Define Pattern. You can use 
Edit>Fill to apply a pattern to larger areas. 
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web workshop 


Pixel-based styles in 
contemporary design 

inspiration pixelslave.com 


:: eb design has 

:||j: traditionally been 

based in grid format - 
aka grid-by-design. But 

many designers are 
now taking this far more 
literally. Block by block 
designs, such as with 
pixelslave.com. evoke nostalgia for 
simple shapes and bold colours; the 
basic roots of aesthetics. Regress 
further and it’s reminiscent of the 
traditional pixel grid, or mosaic styles, 
associated with 8-bit bitmap artwork. 

In a creative arena where there 
seems to be a corner reserved for 
those apposed to synthetic design and 
artwork, many digital styles are looking 
to replicate traditional illustration. 
However, with web having bore its 
foundation through digital media. 8-bit 
graphics are wholly relevant, in terms 
of retro, to the online design movement. 


This said, traditional art trends can 
also be speculated as a strong influence 
for web designers. No more so than the 
movement that is neoplasticism - 
simplified visual compositions to the 
vertical and horizontal directions, 
primary colours and black and white. 
Of course pixelslave.com is a modern 
take on this, using more contemporary 
colours but still blocked, with additional 
modern gradients. 

Photoshop, being a pixel-based 
platform from its very inception up until 
this very day. has many advantages in 
creating associate styles. However, with 
the application of creative filters it has 
the capability to take the bitmap style 
from the constraints of small file sizes in 
to full-HD screen resolution. The 
software also has its own advantages 
when creating grid layouts, with snap- 
to guidelines. Ruler option settings and 
Shape tool objects. 



<comment> 

What our 
experts think 
of the site 


Neoplasticism 

“For those with an extracurricular interest in fine art, neoplasticism 
- also referred to as De Stijl - is categorised as an art form that 
endorsed pure abstraction and universality by reducing design 
style to essentials of form and colour.” 

Adam Smith 



TECHNIQUE 

How to make 
mosaic styles 

Photoshop works to create images with 
what is known as ‘raster graphics’. The 
image is represented pixel-by-pixel, 
dot-by-dot. almost like a micro-jigsaw 
puzzle where each pixel is a puzzle piece. 
These are the building blocks of your 
digital image. But as with everything that 
can be constructed - it can be 
deconstructed. Each pixmap can be 
abstracted to create elemental effects, 
creating cool pixelated styles. Here’s how. 



Lay the gradient 

Open your web template and fill 
your background layer with black. Create 
a new layer and apply a warm colour to 
a black Linear-style Gradient tool, top- 
down. Lower this layer’s Opacity to 50%. 



Brush up 

Create another new layer and 
select a large 0% Hardness, 30% Opacity 
brush, picking and applying subsequent 
colours that fit the spectrum of your 
existing gradient colour. 



Mosaic filter 

Select a scattered brush like 
Grass brush, apply this on a new layer, 
varying size again with a corresponding 
tone. Once happy, select Filter>Pixelate> 
Mosaic, setting the Cell size to taste. 
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Pixel-basecl styles in contemporary design 


TECHNIQUE 

Quick and easy 
grid layout 

Many will use Photoshop to construct their 
webpage layouts, which becomes really 
easy with its Units & Rulers command. Here 
we’ll explain how to use these and other 
tools, to assemble your layout. 



Rulers setting 

To activate your Rulers, select 
View>Rulers. You can drag and drop Guides 
from these in the interface to build your 
layout blueprint. Double-click on the Ruler 
bar for Preferences. Here you can specify 
measurement types in the drop options. 



Guide styles 

Double-click on your guideline with 
the Move tool activate to open more 



INSPIRATION 

Pixelslave make 
pixels matter 


“After some experimentation, we settled on 
the gridded design as a way to visually 
represent pixels, which supports our 
statement that we believe in making every 
pixel matter,” explains Allan Finkelman at 
pixelslave.com. “We animated the pixels 
with JavaScript to bring energy to the page 
and further activated the squares by adding 
a variety of interactive experiences. We 
hope the design illustrates our ability to 
differentiate and bring a brand to life.' 



Preferences options. Here you will be editing 
Guides styles. You can change Color and 
Styles (ie change Lines to Dashed Lines), as 
well as many other aspects. 



03 Snap happy 

Photoshop is intuitive and helps with 
your placement. Make sure to activate View> 
Snap, then set Snap To Guides. Now when 
you apply Shape tools, your selection will 
automatically match to your guide borders. 
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Dedicated to the code-heavy 
side of modern online design 


Build Android apps 
with PhoneGap (part 2) 

Add database functionality to your mobile 
applications using PhoneGap and the native 
support for SQLite databases. Page 82 


Create Twitter 
widgets with 
Web Workers 

Create a Twitter widget with the Web 
Workers API, based on the beginner 
exercises from last month. Page 86 
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Wake up and smell the 

CoffeeScript 

Jeffrey Way examines how extending the JavaScript syntax can 
improve legibility and streamline coding capabilities. Page 78 









Wake up and smell the - 

CqffeeSaipt 

Jeffrey Way delves into the art of cleaner code with this detailed look at how 
CoffeeScript can transform your JavaScript into something more beautiful 


T he web development Industry requires us 
to continuously educate ourselves 
throughout our careers. Take time off and 
you’ll find yourself buried by new 
frameworks, tools and preprocessors. 

Seemingly every day, new libraries or tools are 
released to the public. But this doesn’t mean that we 
should embrace all of them. Certainly keep a curious 
mind, but a healthy level of scepticism is paramount. 

Inevitably, though, certain tools quickly jump to the 
top of the ‘new and shiny’ list. These are the types that 
have the potential to redefine how we build the web. 
Maybe, just maybe, CoffeeScript will reinvent the way 
we physically write our JavaScript. 

There’s just one problem: CoffeeScript doesn’t add 
anything new to the JavaScript language; it merely 
offers an improved syntax, which is ultimately 
compiled into regular JavaScript. So, in an environment 
that already requires us to continuously learn, is it 
worth the time learning yet another preprocessor? 
Well, that question can certainly be debated, but in this 
writer’s opinion you absolutely should dig in! 



coffeescript.org should naturally be your first stop, when 
learning CoffeeScript. Its documentation is fantastic 


What’s CoffeeScript again? 

It’s possible that this is the first you’ve heard of 
CoffeeScript. If so, don’t worry yourself about it; it’s 
only just beginning to truly pick up steam across the 
design and development community. 

At its core, CoffeeScript takes what some would 
refer to as ‘ugly JavaScript’ and transforms it into clean 
and succinct code. It doesn’t extend JavaScript’s 
functionality to any extent; it merely layers a more 
beautiful, readable syntax on top. 

Installation 

If you simply wish to toy with the syntax, pay a visit to 
coffeescript.org, and click on the Try CoffeeScript tab 
to give it a whirl without having to load it on your 
machine. On the other hand, if you want to install 
CoffeeScript locally, make sure that you have up-to- 
date copies of both Node.js and NPM (Node Package 
Manager) installed on your system. 

Don’t worry; it’s easy and can be installed from the 
command line: 


|001 npm install -g coffee-script 


That’s it! You’re all set to go and create some beautifully 
succinct syntax. To watch a file, add script.coffee, and 
compile it to scriptjs every time the file is saved. Within 
the command line, browse to your project root, and 
type in the following: 


|001 coffee —watch —compile script.coffee 


Additionally, many text editors, such as TextMate and 
Sublime Text 2 offer bundles that turn this build 
process into a simple key-stroke. Or, if you wish to try 
an alternative option, you can refer to apps like 
LiveReload and CodeKit, which will handle the ‘watch 
and compile’ task for you automatically. 


Variables 

Consider the following snippet of code: 


001 var foo = ‘bar’; 
002 var bar = ‘baz’; 


In CoffeeScript, var should never be used; in fact, the 
engine will throw an error if you attempt it. Instead, all 
variables are automatically declared in the current 
scope - meaning that we no longer have to worry 
about accidentally creating nasty global variables. 


001 

foo = 

‘bar’ 

002 

bar = 

‘baz’ 


When the code is ultimately compiled to regular 
JavaScript, both variable names will be declared at the 
top of the function scope, and then assigned 
accordingly, like so: 


001 var bar, foo; 
002 foo = ‘bar’; 
003 bar = ‘baz’; 


Semicolons 

Plenty of JavaScript developers hate the fact that all 
expressions should end with a semicolon, like this: 


|001 var foo - ‘bar’; 


Technically, you’ll find that you can get away with 
omitting semicolons, but nonetheless, there are 
gotchas involved with this approach, and it’s been 
deemed a best practice to always include them. 

In CoffeeScript, we can wave goodbye to them 
forever. As such, the previous code can be modified to: 


001 foo = ‘bar’ 


w Maybe CoffeeScript will reinvent 
the way we write our JavaScript w 
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^C^cr Scrip, 


As such, the return keyword may be removed in this 
particular case. 


Parentheses 

Taking additional cues from languages like Ruby, in 
CoffeeScript, parentheses can often be omitted. This 
transforms traditional JavaScript, such as: 


001 if ( guess === 10 ) { 
002 result = ‘correct’; 
|003 } _ 


into: 


001 _if gues s = 1 0 _ 

002 result = ‘correct' 


Even better, we can be more succinct by using a 
statement modifier: 


[001 result = ‘correct' if guess == 10 


Much cleaner and readable, huh? ‘Set result to “correct” 
if the guess variable is equal to 10’. Excellent! 

Please also note that CoffeeScript compiles all -=’ 
operators into the strict equality version (*===’) as 
recommended by tools like JSLint. 

Aliases 

You’ll find the same block of code can be rewritten a 
number of ways. Aliases allow for more human 
readable comparisons. The following groupings are 
identical in both functionality and compilation. 


001 // equality 
002 launch == ‘go’ 

003 launch is ‘go’ 

004 // ine quality _ _ _ 

005 launch != ‘go' _ 

006 launch isnt ‘go’ 

007 // not 

008 return false if IgoForFlight 

009 return false if not goForFlight 

010 return false unless goForFlight 


The Try CoffeeScript 
tab at coffeescript. 
org offers real-time 
compilation; it’s an 
excellent way to toy 
with the syntax 


011 // true _ 

012 return true 
013 return on 
014 return yes 
015 // false 
016 return false 
017 return off 
018 return no 
019 // and 

020 goForFlight && launch() 
021 goForFlight and launchQ 
022 _// or 

023 goForFlight | | prepareQ 
024 goForFlight or prepareQ 


Functions 

Functions are a key area where the syntax is 
considerably different from JavaScript. A traditional 
function that determines whether it’s payday - or 
Friday - might look like: 


001 var payPay = functionQ { 


002 return new PateQ.getPayQ === 5 

1; // is it 

friday? 


003 } 



In an attempt to clean up the clutter, with CoffeeScript, 
this function can be rewritten as: 


001 payDay = -> 

002 new DateQ .getDayQ -- 5 


Alternatively, we can fit the entire code on a single line, 
as we have done here: 


|001 payPay = -> new PateQ.getPayQ == 


There are two key things worth noting here: 

1. f unctionO has been replaced with ->. 

2. The last line of a function will always be returned. 


Any applicable arguments should be placed within 
parentheses, before the ->. 

Perhaps payday is on Thursday. If so, the function 
can be modified to be more flexible. 


001 payPay = (day) -> _ 

002 new PateQ.getPayQ — day 


But, what if we want to assign a default payday of 
Friday (or 5)? In regular JavaScript, we’d likely do: 


001 var payPay = function(day) { 

002 day ( day = 5 ) ; 

003 return new PateQ.getPayQ == day; 
004 } _ 


With CoffeeScript, on the other hand, we can shorten 
this greatly to: 


001 payPay = (day = 5) -> 

|002 new PateQ.getPayQ == day 


Objects 

Similarly, a typical JavaScript object can be cleaned up 
considerably in CoffeeScript. 

Consider the following: 


001 var person = { 
002 legs: 2,_ 

003 hands: 2, _ 

004 fingers: 10 
005 } _ 


CoffeeScript allows us to remove the var keyword, as 
well as both the squiggly brackets and commas. On a 
single line, though, commas continue to be required. 


|001 person = legs: 2, hands: 2, fingers: 10 


However, if we place each property on its own line, they 
may be omitted. The same is true for arrays. 


001 person = 
002 legs: 2 
003 hands: 2 
004 fingers: 10 


Because CoffeeScript is white-space dependent, even 
a single incorrectly indented line can drastically 
change the way the code is compiled to JavaScript. 

Comprehension 

Comprehension enables us to easily transform ten 
lines of code into just a few. It’s essentially a way to 
create expressions to iterate over a provided set of 
items in an array or object. 
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For instance, rather than using the typical for 
statement - and the ‘caching’ that goes along with 
iterating over an array - we can instead use just ‘for’. 

Let’s imagine that we need to iterate over an array of 
characters. With traditional JavaScript, we might do: 


001 var characters = [‘Marty’, ‘Doc’, ‘Biff’]; 
002 for ( var i - 0 , len = characters.length; 
i < len; i++ ) 

003 { 

004 console.log(“Get %s to the time machine”, 
characters[i]);_ 

005 } _ 


It’s certainly not pretty; but, if we instead use 
CoffeeScript, it can be beautiful. 


001 characters = [‘Marty’, ‘Doc’, ‘Biff’] 

002 for person in characters 

003 console.log “Get %s to the time machine”, 

person _ 


There’s a problem, though: we’ve inadvertently 
directed Biff to the time machine, which is not a good 
idea. Let’s modify the code to specify that it should only 
log the string to the console on the condition that the 
current person in the array is not Biff. 

In CoffeeScript, if we take advantage of filters, that’s 
a piece of cake. 


001 characters = [‘Marty’, ‘Doc’, ‘Biff’] 

002 for person in characters when person isnt 
‘ BifP 

003 console.log “Get %s to the time machine”, 
person _ 


Yep. The remedy required a total of four human 
readable words. Now, if we wish, we can make these 
loops more readable by using list comprehension. To 
loop through the characters array and log each 
person’s name to the console, add: 


001 console.log person for person in 
characters 


Or, as another example, to retrieve all anchor tags from 
the page (using jQuery’s map method), store each 
anchor’s href value within an array, and finally loop 
through that array, and log the values to the console, 
with regular JavaScript, we’d do: 


001 var links = $(‘a’),map(function() { 
002 return this.href; 

003 J)j_ 

004 console.log(links.join(‘, ‘)); 


With CoffeeScript, however, we have better choices: 


001 console.log ( link for link in $(‘a’).map 
-> @href ).join ‘, ‘ _ 


Finally, what if we had an array of people objects? 


001 people = [ 

002 name: ‘Jeffrey’ 
003 a ge: 27 _ 

004 , 

005 name: ‘John’ 

006 age: 13 
007 , 

008 name: ‘Jan’ 


** JavaScript is certainly not pretty, but 
CoffeeScript can be beautiful w 
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009 age: 42 
010 ] 


Our job is to create a new array, called ‘ofAge’, and 
make it equal to a list of only the objects, where the 
person’s age is 21 years or older. Again, with regular, 
vanilla JavaScript, we might do: 


001 var ofAge = [];_ 

002 for ( var i = 0, len = people.length; i < 
len; i++ ) {_ 

003 if ( pe ople[i ] .ag e >= 21 ) { 

004 ofAge.push( people[i] ); 

005 } 

006 } _ 


As you can see, it’s fairly verbose for such a simple task. 
With CoffeeScript, let’s reduce this to a single line, using 
good old comprehension. 


001 ofAge = ( p for p in people when p.age >= 
21 ) 


Bam! By wrapping everything that occurs after the 
equal sign within parentheses, we specify that the 
ofAge variable should be equal to the results of that 
operation, which will be an array. So the array will be 
built and then assigned to ofAge. When confused, 
simply read the expression from left to right. ‘Push the 
person object to the results array, for each person in 
the people array, just as long as the person’s age 
property is greater than or equal to 21.’ The when 
keyword is called a filter, and can be incredibly 
powerful. Admit it: you’re beginning to salivate. 

String interpolation 

In the previous section, we used a fairly typical method 
to bind a variable to a string. 


001 console.log “Get ^person to the time 
machine”, person 


Similar to languages like Ruby, CoffeeScript offers 
string interpolation, via the#{) syntax. This code can be 
rewritten, like so: 


001 console.log “Get #{person} to the time 
machine” 


Please note that to take advantage of string 
interpolation, you must use double-quotes. 

Function binding 

Consider the fairly common task of caching a reference 
to this, so that when the context changes - such as 
within the callback of a jQuery event binding - we can 
still access the cached location. Here’s an example: 


001 var self - this; _ 

002 $(‘hi’) .on(‘click’, functionQ { 




























































The Try CoffeeScript 
tab at coffeescript. 
org offers real-time 
compilation; it’s an 
excellent way to play 
with the syntax 


005 this.age = age; 

006 } 

007 Person.prototype.getBirthYear = function() 

{ _ 

008 return new Date().getFullYear() - this.age; 

009 _ 

010 return Person; 

011 })(); 


So, we’ve effectively cut the number of lines from 11 
down to four. To instantiate this new class, we can write: 


001 man = new Person(‘Jeffrey’, 27) 
002 man.getBirthYearQ # 1985 _ 


Even better, to create child classes, which extend 
Person, we only need to use the extend keyword: 


003 // ‘this’ now refers to the anchor that 
was clicked 

004 // use self instead _ 

005 self.someMethod(); 

006 }); _ 


CoffeeScript provides the ‘fat arrow’, or =>’, which can 
be of tremendous help. 

If we change -> to => then behind the scenes, 
CoffeeScript will cache a reference to this. Then, within 
the function, all references to this will dynamically be 
replaced with the cached version. 

The following code illustrates this idea: 


001 $(‘hl’).on ‘c lick’, => this.s omeMethodQ 
002 ...will compile to: 

003 var _this = this; 

004 $(‘hl’).on(‘click’, function() { 

005 return _this.someMethodQi; 

006 }); _ 


Classes 

CoffeeScript provides a helpful class syntax, for those 
who prefer a more classical approach to structuring 
their code. For instance, by simply typing class Person, 
CoffeeScript will compile that code to: 


001 var Person; 

002 Person = (function() { 
003 function Person() {} 
004 return Person; 

005 »(); 


Notice how the Person variable is equal to a self¬ 
invoking function expression that returns the inner 
Person function. Should we need to execute a bit of 
code immediately upon instantiation, similar to PHP’s 
..construct method, we can place our init code within 
the constructor method of the class, like so: 


001 class Person 

002 constructor: (name, age) -> 


003 this.name = name 


001 class Child extends Person 

004 this.age = age 



The constructor method can’t be called explicitly; 
instead, it’s triggered dynamically when you instantiate 
the class. This code can be improved, however; 
Coffeescript provides some extra sugar that can 
shorten it. In CoffeeScript, the @ symbol will always 
refer to this, or the instance of Person. 

As such, rather than this.age, we can instead use 
@age, which Ruby developers will be familiar with. 


001 class Pe rson 

002 constructor: (name, age) -> 

003 @name = name 

004 (gage = age _ 


Even better, though, we can take things one step 
further. These instance variables may be set in a 
different way: 


001 class Person 

002 constructor: (@name, @age) -> 


Not bad, huh? At this point, to extend Person’s 
prototype with additional methods, we simply create 
new methods in the same way that we would add 
methods to an object. Behind the scenes, CoffeeScript 
will attach the method to the prototype. Let’s add a 
method that determines the person’s birth year. 


001 class Person 

002 constructor: (@name, @age) -> 
003 getBi rthYear: -> 

004 new DateQ .getFullYearQ - @age 


This beautiful, clean code, once compiled to JavaScript: 


001 var Person; 

002 Person = (function() { 

003 function Person(name, age) { 
004 this.name = name; 


At this point, Child now has access to all of the 
properties and methods from the Person class, and 
can reference or overwrite them at will. 


Should you use 
CoffeeScnpt? 


There are valid arguments for and against using 
CoffeeScript in production. The nay-sayers will point 
out that, because you’re not working specifically with 
the compiled JavaScript, you’re debugging code that 
you didn’t write. 

“Coffeescript takes the good parts and puts a 
minimal syntax on top of it, which is lovely. I don’t 
recommend using it in production, because it comes 
with its own world of problems.” (Douglas Crockford) 

You could also argue that too much dependency on 
abstractions like this can result in the developer having 
a lesser understanding of JavaScript as a whole. 

Because so many developer best practices are 
baked into the compiler, it eases the burden on the 
developer to memorise them. 

“A best practice that can be enforced by a compiler 
is better than a best practice that hasto be remembered 
and manually typed out.” (Jeremy Ashkenas) 

To play devil’s advocate, the same could have been 
said for jQuery. Does jQuery encourage a new breed of 
developer who never truly learns vanilla JavaScript? 
Absolutely not. If anything, it has assisted greatly in the 
resurgence of the JavaScript language. 

While the CoffeeScript syntax may initially be more 
familiar and welcoming to Ruby and Python 
developers who are afraid of JavaScript, hopefully, it 
will encourage them to dig more deeply into the 
underlying language. 

The pros of CoffeeScript are obvious: code 
automatically adheres to best practices, and becomes 
shorter, less error-prone, and considerably more 
readable. But, then again, debugging is a concern. 

The choice is up to you! As for yours truly, well, I can’t 
imagine going back. I’m all in with CoffeeScript. 
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| Build apps for Android with PhoneGap: part 2 


App database 
support with 
PhoneGap 

Add database functionality to your 
mobile apps using PhoneGap and the 
native support for SQLite databases 

tools I tecta I trends Eclipse, PhoneGap 
export Matt Gifford 



Step code 
Completed 
project 


I f you're building mobile apps, 

chances are at some point you are 
going to want to store or persist 
data. This could be to save user 
input, remember cached details, or 
to store personalisation or 
customisation options. 

PhoneGap can really make your 
life easier here. By including Web 
SQL Database methods, we can 
easily create custom databases using the SQLite 
database specification to do this very thing. 

In the first of our two-part tutorial we built a simple 
application that reads data from a local JSON file to 
display quotes on the main page, allowing the user to 
select a new quote to read by either button click or by 
shaking the device. This month we will extend this 
application and introduce a local SQLite database into 
which we can store our pre-defined information from 
the JSON file. We’ll also build an interface and the 
functionality to let the user write their own favourite 
quotes and save them into the database. 


Global variable 

When we build our database connection, we will need to access the 
database throughout our application. As such, it will make sense to store the 
Database object as a global variable that we can reference whenever we need 
to run any transactions instead of creating a new connection every time. Add 
the global variable to the top of 'quoteapp.js': 

001 var db = * *; 

002 var quoteObject = '’; 

Create Database 

Let’s now create the reference to our database. PhoneGap provides a 
single method to achieve this. If the database already exists, it will create the 
Database object. If not. it will create the database first. Here we provide a 
name for the SQLite database file, the version number and the size of the 
database in bytes. 

001 // Create a reference to the database 
002 function getDatabase() { 

003 return window.openDatabase("quoteDB”, 

004 "1.0", "Quote Database", 1000000000); 

005 } 

Getting ready 

We need to amend our onDeviceReady method to cut the code that 
makes a request to the local ‘quotes.json’ file to load in pre-defined quotes. 
We'll use this again shortly. Add in the code (full code is on the disk) to make a 
call to create the database and save it into the db variable we created earlier. 

001 db = getDatabase(); 

Create table 

With the Database object stored, we can now start to work with it and 
store data. Firstly, we need to create any tables we need if they do not exist. 


Any interaction with the database itself is managed through the executeSql 
method. We have two callback methods included - one for success, and the 
other for any errors. The full code is on the covermount disk. 

001 db.transaction(function(tx) { 

002 tx.executeSql('CREATE TABLE IF NOT EXISTS QUOTES 
003 (id INTEGER PRIMARY KEY AUTOINCREMENT, 

004 quote TEXT NOT NULL DEFAULT 
005 name TEXT NOT NULL DEFAULT 
006 }, databaseError, getlterns); 

Database errors 

The databaseError handler method simply displays an alert message 
with some details on the error. The error parameter is an SQLError object 
generated by PhoneGap, which contains two properties. The first is an error 
code, while the second is a message to describe the error. These details could 
be logged for debugging or hidden from the user. 

001 // Database error handler 
002 function databaseError(error) { 

003 alert("SQL Error: " + error.code); 

004 } 

Query Database 

The getltems method runs another transaction to query the database 
for all records. If we do not encounter any errors, it will then run the 
querySuccess method. You can see here we reference the Database object 
from the variable. We are once more making use of the generic databaseError 
handler method to catch any potential issues. 

001 // Run a select statement to pull out all records 
002 function getltems() { 

003 db.transaction(function(tx) { 

004 tx.executeSql('SELECT id, quote, name FROM QUOTES', [], 

005 querySuccess, databaseError); 
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<Above> 

• Our new page in the application will let the user add a custom quote 
into the database 


006 }, databaseError); 

007 } 

Check records 

Having queried the database, we can check the number of rows 
returned. If we have records, we'll loop over them and push them into our 
quote array. If we don’t have any records, we can pre-populate the database 
with the data from our JSON file by calling the getJSONData method. 

001 // Process the SQLResultSetList 
002 function querySuccess(tx, results) { 

003 var len = results.rows.length; 

004 if(len == 0) { 

005 // We have no records in the database 

006 // Let's insert our JSON quotes 

007 getJSONData(); 

008 } else { 

009 for (var i=0; iclen; i++){ 

010 arrQuotes.push(results.rows.item(i)); 

011 } 

012 getQuote(); 

013 } 

014 } 

Read JSON 

Create a new method called ‘getJSONData’ and paste in the old code 
to request the JSON file data. We’ll amend it to loop over the results, and we 
will insert each result into the database. Once the loop is complete, we’ll call 
the getltems method once more to run a new select query. Full code on disk. 


001 var data = JSON.parse(request.responseText); 

002 // Make sure we have content 
003 if(data.quotes.length) { 

004 db.transaction(function(tx) { 

005 // Loop over it and store it into the database 

006 for(var i=0; i < data.quotes.length; i++) { 

007 tx.executeSql('INSERT INTO QUOTES (quote, name) 

008 VALUES (?,?);', 

009 [data.quotes[i].quote, 

010 data.quotes[i].name]); 

011 > 

012 }, databaseError, getltems); 

013 } 

Get quotes 

Once a successful transaction has been made with the database to 
select saved records and we have rows to return, the getQuote method will be 
called to select an item to display. We’ve amended the previous incarnation 
from the last tutorial; this removes the returned object from the array to avoid 
repeating the same quote. 

001 if(arrQuotes.length) { 

002 

003 var arraylD = Math.floor(Math.random() * 

004 arrQuotes.length); 

005 quoteObject = arrQuotes[arrayID]; 

006 

007 // Now remove the item from the array 

008 arrQuotes.splice(arrayID, 1); 

009 

010 $('p[rel=cite]').html(quoteObject.name); 

011 $('#quote').html('<p>' + quoteObject.quote + '</p>’); 

10 Empty array 

As we are removing each quote from the array before we display it. we 
need to check the length of the array to catch the fact that we will end up 
emptying our reserve of quotes, effectively running out. If we have cleared the 
array, we will run the getltems method once more to refill it with more quotes 
before we proceed. 

001 } else { 

002 

003 // The quote array is empty. Refilling the pot for you 
004 getltems(); 

005 
006 } 

Custom quotes 

We want our users to be able to insert their own quotes into the 
database. Open ‘index.htmr and add a new button element below the 
refreshBtn element. This will open a new page called 'add.html’. We will use the 
class and the rel attributes to bind a click handler to this button. 

001 cbutton rel='’add" class="button pink pagenav’’>Add Quote</ 
button> 

Create a new page 

Create a new page called ‘add.html’. This will act as our input collection 
form. The new page must include the relevant JavaScript libraries and 
stylesheet references in the head tag. 
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001 <!DOCTYPE html> 

002 <html> 

003 <head> 

004 <title>Add Quote</title> 

005 <link rel="stylesheet” href=’'style.css''> 

006 <script type="text/javascript" charset="utf-8" src="jquery- 
1.6.4. min. js”x/script> 

007 <script type="text/javascript" charset=”utf-8" 
src="phonegap-l .4.1. js"x/script> 

008 <script type=''text/javascript" charset=''utf-8" 

src="quoteapp. js"x/script> 

009 </head> 

010 <body> 

011 

012 

013 </body> 

014 </html> 

Input elements 

Let's add the form elements in to the 'add.html' page to accept our 
user input. We’li need one input for text, and a textarea form element, which 
will accept the quote text. Make sure you provide a memorable id attribute 
value for each of these as we will reference them later on. 

001 <form class=''form"> 

002 

003 <label for="name”>Name</label> 

004 cinput type="text" name=”name" 

005 id="name" placeholder="Author name” /> 

006 

007 <label for="quote”>Quote</label> 

008 ctextarea name="quote" id="quote"x/textarea> 

More buttons 

Below the form elements, add two new button elements to 'add.html'. 
The first button will have an id attribute set to saveQuoteBtn. We’ll bind a click 
handler to this to save data. The second will take our user back to the index 
page without saving. Note the rel and class attributes in the second button. 


001 cbutton id="saveQuoteBtn" 

002 class="super button pink">Save Quote</button> 

003 

004 <button rel=”index” class="button pink pagenav”>Back</button> 
005 

006 </form> 

Page navigation 

With our navigation buttons created, let’s now add the click handler. 
Open 'quoteapp.js' and add the following code within the onDeviceReady 
function. We are using the jQuery’s class selector to apply the handler, and we 
can obtain the page from the rel attribute of the selected button to pass 
through to the window.open method. 

001 $(’.pagenav').bind('click’, function() { 

002 window.open($(this).attr('rel') + '.html'); 

003 }); 

Save handler 

While we are still within the onDeviceReady method, we can now also 
add our click handler to the saveQuoteBtn element. This will then read the 
values found in both the name and quote form elements and pass them into 
the saveQuote method. 

001 $('#saveQuoteBtn').bind('click', function() { 

002 

003 var newQuoteName = $('#name').val(); 

004 var newQuoteText = $('#quote').val(); 

005 

006 saveQuote(newQuoteText, newQuoteName); 

007 

008 }); 

Saving data 

Add the saveQuote method to the ‘quoteapp.js’ file. We’ll first check to 
make sure both fields have content to avoid saving empty values - this is not 
something we want. Once we have this content we are able to run another 
database transaction, inserting the values into the table using the parameters 
sent to the function. 

001 function saveQuote(quote, name) { 

002 if(quote === "" || name === "") { 

003 alertC'I'm here to stop you saving empty data.”); 

004 } else { 

005 db.transaction(function(tx) { 

006 tx.executeSql('INSERT INTO QUOTES 

007 (quote, name) VALUES (?,?);', [quote, name]); 

008 }, databaseError,saveSuccess); 

009 } 

010 } 

Return home 

When saving the new quotes, we once again provide two callback 
methods to handle an error and the successful transaction. Create the 
saveSuccess method, which will run following an error-free insert. This will take 
the user back to the 'index.html’ page. 

001 function saveSuccess() { 

002 window.open('index.html'); 

003 } 
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Delete option 

We want our users to have the option to delete the currently 
displayed quote from the database, so we are now going to go and 
add a new button to 'index.html’ with the rel attribute set to delete. Add 
the following click handler for the button into the onDeviceReady 
method in ‘quoteapp.json’ which will run the showDeleteConfirm 
function when pressed. The full code is on the CD. 

001 <button rel="delete" class=''button pink">Delete Quote</ 
button> 

002 

003 $('button[rel=’’delete"]’).bind('click', function() { 
004 showDeleteConfirm(); 

005 'Are you sure you want to exit?', 

onExitConfirm, 

006 }); 


Code library 

In detail 

Let's take a closer look at some of the techniques used within the 
project to build our application 


Although not supported 
in Android, other 
devices can change the 
database version when 
updating the schema. 


001 function getDatabase() { 

002 var db = window.openDatabase( 
003 "quoteDB", 

004 "1.0", " 

005 Quote Database", 

006 100000000); 

007 

008 db.changeVersion(”1.0", "1.1"); 

009 

010 } 


Confirm deletion 

When a user chooses to delete the stored quote, we want to 
provide them with a confirmation window to give them the chance to 
opt out of the deletion. Now when they select either Yes or No, the 
onDeleteConfirm method will run to determine how to proceed and if 
we continue with the deletion. 

001 function showDeleteConfirm() { 

002 navigator.notification.confirm( 

003 'Are you sure you want to delete this quote?', 

004 onDeleteConfirm, 

005 'Deletion Confirmation’, 

006 'No, Yes' 

007 ); 

008 } 

User says yes 

Having chosen an option from the confirmation button, we are 
able to tell from the index of the button selected what to do next. If the 
user has decided they want to delete the quote and clicked Yes. the 
index will be 1 and we can continue with the deletion, sending through 
the id of the quote we wish to remove. 

001 function onDeleteConfirm(button) { 

002 if(button == 2) { 

003 deleteQuote(quoteObject.id); 

004 } 

005 } 

So long, farewell 

To delete the quote from the database, we’ll once more run a 
transaction on the stored Database object and execute a DELETE SQL 
statement, passing through the quote id as the parameter for the 
WHERE clause. Once complete, the application will query the database 
again to load up the next quote. 

001 function deleteQuote(quotelD) { 

002 db.transaction(function(tx) { 

003 // Delete the selected quote 

004 tx.executeSql( 'DELETE FROM QUOTES WHERE id = 

(?);',[quotelD]); 

005 }, databaseError, getltems); 

006 } 


When selecting a quote to 
display, we first assign 
the array index to a 
variable so we can 
remove that object using 
the splice method. 


001 function getQuote() { 

002 if (arrQuotes.length) { 

003 var arraylD = Math.floor(Math.random() 

* arrQuotes.length); 

004 quoteObject = arrQuotes[arrayID]; 

005 

006 // Now remove the item from the array 

007 arrQuotes.splice(arrayID, 1); 

008 

009 $('p[rel=cite]’).html(quoteObject. 

name); 

010 $('#quote').html('<p>' + 

quoteObject.quote + '</p>'); 

011 

012 } else { 

013 

014 // The quote array is empty. Refilling 

the pot for you 
015 getltems(); 

016 

017 } 

018 } 


Looping over the array, 
we can reference the 
values to insert into the 
database by the array 
index number. 


001 if(data.quotes.length) { 

002 db.transaction(function(tx) { 

003 // Loop over it and store it into the 

database 

004 for(var i=0; i < data.quotes.length; i++) 

{ 

005 tx.executeSql('INSERT INTO QUOTES (quote, 
name) VALUES 

006 (?,?);', [data.quotes[i].quote, data, 

quotes 

007 [ij.name]); 

008 } 

009 }, databaseError, getltems); 

010 } 


Make sure you provide a 
memorable id attribute value Pi 
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Create Twitter 
widgets with 
Web Workers 

Use your new-found knowledge of 
this HTML5 API to survey tweets and 
display the results in a fun widget 

tools I tecli I trends Text editor (not Microsoft Word), web browser 
experts Eric Freeman, Elisabeth Robson 



I n the first part of this tutorial, we 
introduced a new EITML5 API 
called Web Workers. These code 
workers give you the ability to 
create additional threads for your 
JavaScript, which can be useful 
when you've got a task that's 
drawn out or computationally 
intensive. If you have a similar use 
case, then web workers can free up 
your main thread to keep your application responsive 
so the visitor can continue to use your page. 

In the previous instalment we saw how to create, 
communicate with and receive data from web workers. 
In this tutorial we're going to create a worker that 
monitors Twitter - sending data to your main page code 
as needed. You're going to see that this is not only a 
convenient way to structure your code, but also that by 
using a web worker, your JSONP code (needed to 
communicate with Twitter; see issue 194 for more) is 
more concise and manageable than the conventional 
method of using JSONP, which requires script injection. 


Set up the main page 

First, you are going to have to create a simple HTML file (let’s call it 
‘manager.htmD that contains an empty body (don’t worry, it won’t be empty 
for long), and the main page code within a script element. The code in the 
main page first instantiates a worker object using a reference to a JavaScript 
file, 'worker.js' (line 7). The code then goes about setting the worker's 
onmessage property to a handler function (line 8) so that it can receive 
message events from the worker. 

001 <!doctype html> 

002 <head> 

003 <meta charset="utf-8"> 

004 <title>Twitter Sentiment Widget</title> 

005 clink rel=’’stylesheet" href=”widget.css"> 

006 <script> 

007 var aWorker = new Worker("worker.js"); 

008 aWorker.onmessage = onWorkerMessage; 

009 

010 function onWorkerMessage(evt) 

011 { 

012 // message from the worker is handled here 

013 } 

014 </script> 

015 </head> 

016 <body> 

017 // HTML for widget will go here 

018 </body> 

019 </html> 

020 

The worker 

Now we’ll begin implementing the worker (worker.js), which is going to 
be our helper that monitors Twitter. Start by adding a function - 
getTwitterSearchResultO - to the worker. 


001 function getTwitterSearchResultO ( 

002 } 

Use the Twitter JSONP API 

We’re going to use the Twitter JSON API to periodically search Twitter 
for a given search term, so we need to construct the URL to the Twitter API. 
Add the code below to do that and supply a search query of your choosing 
(line 1). We’re going to use the term ‘seuss’ because today (the day we’re 
writing this article) just happens to be Dr Seuss’ birthday and there is a lot of 
Twitter chatter on the topic. Whatever search query you choose, make sure it’s 
one for which you’ll get a fair number of search results. Add a second variable 
- twitterURL - that contains the URL to access the Twitter API (lines 2-3). 

001 var query = "seuss"; 

002 var twitterURL = ”http://search. twitter.com/search. json?q=” + 
query + 

003 "&rpp=10&since_ 

id=l&callback=handleRequest"; 

004 

005 function getTwitterSearchResultO { 

006 } 

Use JSONP with Web Workers 

If you’ve used JSONP before, you know it requires a hack-ish injection 
of a <script> element into the DOM to force the browser to retrieve JSON data 
(if you don’t know how to do that, no worries, you don’t need to for this 
tutorial). With Web Workers there is a much more straightforward method of 
retrieving the JSON data using the importScriptsO function. Add a call to 
importScriptsO in the function getTwitterSearchResultsO, so that each time 
this function is called, an API request is made to Twitter (line 6). 

001 var query = "seuss"; 

002 var twitterURL = "http; //search. twitter.com/search. json?q=" + 
query + 
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003 "&rpp=10&since_ 

id=l&callback= handleSearchResult"; 

004 

005 function getTwitterSearchResult() { 

006 importScripts(twitterURL); 

007 } 

, . Implement the callback 

Now one thing you need to know about JSONP is that we supply a 
callback when we make the Twitter request. If you note the twitterllRL (lines 
2-3) you’ll see we’ve specified a callback named 'handleSearchResult'. When 
the search results are retrieved, that callback function will be called. So add a 
function with the name ’handleSearchResultO’ to the bottom of your worker.js 
(lines 9-11). handleSearchResultO will be called with a JavaScript object 
containing the results from Twitter. This object includes an array of tweets that 
we’ll use to create the widget (see 'How to use threads in JavaScript’ WD #195). 

001 var query = "seuss"; 

002 var twitterllRL = "http://search.twitter.com/search. json?q=” 

+ query + 

003 ”&rpp=10&since_id=l&callback= 

handleSearchResult"; 

004 

005 function getTwitterSearchResult() { 

006 importScripts(twitterllRL); 

007 } 

008 

009 var tweets = jsonObj.results; 

010 } 

c Fill in the callback details 

Next, add the code to iterate over the tweets, storing the text of each 
tweet in a variable named ’tweet’ (lines 12-15). 

001 var query = "seuss"; 

002 var twitterllRL = "http://search.twitter.com/search. json?q=" 

+ query + 

003 ”&rpp=10&since_id=l&callback= 

handleSearchResult"; 

004 

005 function getTwitterSearchResult() { 

006 importScripts(twitterURL); 

007 } 

008 

009 function handleSearchResult(jsonObj) { 

010 var tweets = jsonObj.results; 

011 

012 for (var i = 0; i < tweets.length; i++) { 

013 var tweet = tweets[i].text; 

014 // process each tweet 

€€ By using a web worker, your 
JSONP code is more concise 
and manageable than the 
conventional method, which 
requires script injection 99 


015 } 

016 } 

Making use of the tweets 

There is a lot we can do with Twitter data; this time, we’re going to write 
an embarrassingly simple sentiment analysis engine, which works by looking 
for a few simple words in each tweet, like ‘love’, ’hate’ ‘cool’, ‘lame’ and comes 
up with a number representing how liked, or unliked the search query term is. 
In this code all we’re going to do is keep a running total of these sentiments 
and send them back to the main page, which can display them in widget form. 
Create your words first. You’ll need two sets (put these at the top of ‘worker.js’) 
(lines 3-4) and also a couple of counters: one for the sentiment score (line 1). 
and another for the total count of tweets (line 2). 

001 var sentiment = 0; // sentiment score, positive good, negative 
bad 

002 var count =0; // total count of tweets in score 

003 var like = /love|1ike|good|great|rocks/; 

004 var dontlike = /hate|bad|sucks|lame/; 

005 var query = "seuss"; 

006 var twitterllRL = "http://search.twitter.com/search.json?q=" + 
query + 

007 ”&rpp=10&since_id=l&callback= 

handleSearchResult"; 

008 

009 function getTwitterSearchResult() { 

010 importScripts(twitterllRL); 

011 } 

012 

013 function handleSearchResult(jsonObj) { 

014 var tweets = jsonObj.results; 

015 

016 for (var i = 0; i < tweets.length; i++) { 

017 var tweet = tweets[i].text; 

018 // process each tweet 

019 } 

020 } 

Count words that match 

Now use JavaScript’s String searchO function to hunt for these words 
in the tweets, checking both the like and dontlike search terms (lines 18-25). 
First convert the tweet text to lowercase (line 18) and then see if any of the 
words match. If they do, add one to the sentiment score if it matches a like 
(lines 19-21) or subtract one if it matches a dislike (lines 22-24) (we told you this 
was embarrassingly simple). Also update the count of tweets (line 25). 

001 var sentiment = 0; // sentiment score, positive good, negative 
bad 

002 var count =0; // total count of tweets in score 

003 var like = /love|1ike|good|great|rocks/; 

004 var dontlike = /hate|bad|sucks|lame/; 

005 var query = "seuss"; 

006 var twitterllRL = "http://search.twitter.com/search.json?q=" + 
query + 

007 "&rpp=10&since_id=l&callback= 

handleSearchResult"; 

008 

009 function getTwitterSearchResult() { 

010 importScripts(twitterllRL); 

011 } 
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€i We don’t want the worker to 
make the request to the Twitter API 
just once; we want the worker to 
keep polling Twitter to get new 
results every so often W 



<Above> 

• The hand indicator showing the 
popularity of your search term 


012 

013 function handleSearchResult(jsonObj) { 

014 var tweets = jsonObj.results; 

015 

016 for (var i = 0; i < tweets.length; i++) { 

017 var tweet = tweets[i].text; 

018 tweet = tweet.toLowerCase(); 

019 if (tweet.search(like) != -1) { 

020 sentiment += 1; 

021 } 

022 if (tweet.search(dontlike) !== -1) { 

023 sentiment -= 1; 

024 } 

025 count++; 

026 } 

027 } 

Send the result back 

Next, use the worker’s postMessageO function to send a message 
back to the main page. Create an object containing the query, the sentiment 
score and the count and return this object to the main page. 

001 var sentiment = 0; // sentiment score, positive good, 
negative bad 

002 var count =0; // total count of tweets in score 


003 var like = /love|like|good|great|rocks/; 

004 var dontlike = /hate|bad|sucks|lame/; 

005 var query = "seuss"; 

006 var twitterURL = "http://search.twitter.com/search.json?q=” + 
query + 

007 "&rpp=10&since_id=l&callback= 

handleSearchResult"; 

008 

009 importScripts(twitterURL); 

010 } 

011 

012 function handleSearchResult(jsonObj) { 

013 var tweets = jsonObj.results; 

014 

015 for (var i = 0; i < tweets.length; i++) { 

016 var tweet = tweetsCi] .text; 

017 tweet = tweet.toLowerCase(); 

018 if (tweet.search(like) !== -1) { 

019 sentiment += 1; 

020 } 

021 if (tweet.search(dontlike) !== -1) { 

022 sentiment -= 1; 

023 } 

024 count++; 

025 } 

026 postMessage({"query": query, "sentiment": sentiment, 

"count”: count}); 

027 } 

Get the worker working 

To get the worker going, add a call to getTwitterSearchResultO (line 32). 
That will start things off. But we don’t want the worker to make the request to 
the Twitter API just once: we want the worker to keep polling Twitter to get 
new results every so often. So, also add a setTimeoutO in 
getTwitterSearchResultO to make the request to Twitter every five seconds 
(line 11). We can make sure that we get only new tweets since our previous 
request by updating the twitterURL to use the refresh_url value from the 
previous Twitter results (line 16). 

001 var sentiment = 0; // sentiment score, positive good, 
negative bad 

002 var count =0; // total count of tweets in score 

003 var like = /love|like|good|great|rocks/; 

004 var dontlike = /hate|bad|sucks|lame/; 

005 var query = "seuss"; 

006 var twitterURL = "http://search.twitter.com/search.json?q=" + 
query + 

007 "&rpp=10&since_id=l&callback= 
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handleSearchResult"; 

008 

009 function getTwitterSearchResult() { 

010 importScripts(twitterURL); 

011 setTimeout(”getTwitterSearchResult()", 5000); 
012 } 

013 


014 function handleSearchResult(jsonObj) { 


015 var tweets = jsonObj.results; 

016 twitterURL = '’http://search.twitter.com/search.json” + 


jsonObj.refresh_url + ”&callback=handleSearchResult”; 


017 

018 

019 

020 

021 

022 

023 

024 

025 

026 

027 

028 

029 


for (var i = 0; i < tweets.length; i++) { 
var tweet = tweets[i].text; 
tweet = tweet.toLowerCase(); 
if (tweet.search(like) !== -1) { 
sentiment += 1; 

> 

if (tweet.search(dontlike) !== -1) { 
sentiment -= 1; 

> 

count++; 

} 

postMessage({"query”: query, "sentiment": sentiment, 


"count”: count}); 


030 } 
031 


032 getTwitterSearchResultQ; 


Build the Twitter widget 

We’ve got everything we need in the worker, so now it’s time to use 
the results from the worker in the Twitter widget. Edit the main page 
(manager.html) and update the <body> to include a sentimentWidget <div> 
(line 15) that contains a paragraph element with the id of ‘search’ where we’ll 
put the search term (line 17), a paragraph element with the id of ‘sentiment’ for 
the sentiment count (line 20). and a paragraph with an id of ‘count’ for the 
total count of tweets (line 22). To make the widget more fun, we’ll include a 
thumbs-up or thumbs-down graphic if the sentiment count is greater than or 
less than 0. respectively (and no hand if it equals 0). We’ll style the hand <div> 
to add the icon in a later step (line 19). 

001 <meta charset=”utf-8"> 

002 <title>Twitter Sentiment Widget</title> 

003 dink rel=”stylesheet" href="widget.css”> 

004 <script> 

005 var aWorker = new Worker("worker.js”); 

006 aWorker.onmessage = onWorkerMessage; 

007 

008 function onWorkerMessage(evt) 

009 { 

010 // message from the worker is handled here 

011 } 

012 </script> 

013 </head> 

014 <body> 

015 <div id="sentimentWidget”> 

016 <p>How the Twittersphere is feeling about:</p> 

017 <p id=”search”x/p> 

018 <div id=”handContainer"> 

019 <div id=”hand”x/div> 


020 <p id=”sentiment”x/p> 

021 </div> 

022 <p class="count">Sentiment based on <span 

id="count"x/span> tweets</p> 

023 </div> 

024 </body> 

025 </html> 

Collect the results 

We have all the HTML in place; now it’s time for us to add the code. 
First, add the code we need to get the results from the worker. Remember, the 
worker is sending back an object that contains the properties query (the 
Twitter search term), the sentiment count and the total count of tweets. So, 
first get the message from the worker using the data property of the event 
object passed into the message handler (line 5), and then update the search, 
count and sentiment <p> elements with the query, count, and sentiment 
property values (lines 6-10). 

001 var aWorker = new Worker("worker.js"); 

002 aWorker.onmessage = onWorkerMessage; 

003 

004 function onWorkerMessage(evt) { 

005 data = evt. data; 

006 document.getElementById(”search").innerHTML = data.query; 
007 document.getElementById("count "). innerHTML = data.count; 

008 

009 var sentiment = document.getElementById(”sentiment"); 

010 sentiment. innerHTML = data.sentiment; 

011 } 

Thumbs up or thumbs down? 

Next, add a thumbs-up or thumbs-down graphic (to highlight if the 
Twitter chatter is positive or negative about the search term) depending on 
the value of the sentiment count. We’ll do this by applying a graphic 
dynamically to the background of the hand <div>. To make the code a little bit 
more efficient, and so we’re not having to create new thumbs-up or thumbs- 
down images each time we get a message from the worker, we can go ahead 
and create the two images when we first load the page. Add two new 
variables - thumbsUp and thumbsDown - to hold the two images and initialise 
them to empty Image objects (lines 4,6). Set the SRC property for these 
images to ‘thumbsUp.png’ and ‘thumbsDown.png’, respectively (lines 5,7), and 
of course make sure that you have these images in the same directory as 
your manager.html file. 

001 var aWorker = new Worker ("worker. js"); 

002 aWorker.onmessage = onWorkerMessage; 

003 

004 var thumbsUp = new Image(); 

005 thumbsUp.src = "thumbsUp.png”; 

006 var thumbsDown = new Image(); 

007 thumbsDown.src = "thumbsDown.png"; 

008 

009 function onWorkerMessage(evt) { 

010 data = evt.data; 

011 document.getElementById("search").innerHTML = data.query; 
012 document.getElementById("count").innerHTML = data.count; 

013 

014 var sentiment = document.getElementById(”sentiment”); 

015 sentiment.innerHTML = data.sentiment; 

016 } 
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€€ You should experiment with 
your own uses of web workers, 
especially for those tasks that are 
computationally intensive W 


Add the right image 

Now. we need to check the value of the sentiment count sent back 
from the worker, and add the appropriate image to the background of the 
<div> depending on the value. First, get the hand <div> object (line 16). and 
then check the value of data.sentiment. If it’s greater than 0, add the 
'thumbsUp.png’ image to the background (lines 17-18); if it’s less than 0. add 
the 'thumbsDown.png' image (lines 19-20). If the value is 0. then set the 
background image to none so that no image displays (lines 21-22). 

001 var aWorker = new Worker("worker .js”); 

002 aWorker.onmessage = onWorkerMessage; 

003 

004 var thumbsUp = new Image(); 

005 thumbsUp. src = "thumbsUp.png"; 

006 var thumbsDown = new Image(); 

007 thumbsDown.src = "thumbsDown.png"; 

008 

009 function onWorkerMessage(evt) { 

010 data = evt.data; 

011 document.getElementById("search").innerHTML = data.query; 
012 document.getElementById("count").innerHTML = data.count; 

013 

014 var sentiment = document.getElementById("sentiment"); 

015 sentiment.innerHTML = data.sentiment; 

016 var hand = document.getElementById("hand”); 

017 if (data.sentiment > 0) { 

018 hand.style.backgroundlmage = ”url(’thumbsUp.png’)"; 

019 } else if (data.sentiment < 0) { 

020 hand.style.backgroundlmage = ”url(’thumbsDown.png’)”; 

021 } else { 

022 hand.style.backgroundlmage = "none”; 

023 } 

024 } 

Style the <div> 

To make sure the widget looks pleasing, we want to display the 
sentiment count numerically in the middle of the hand image. That requires 
different positioning for each sentiment value, so we've created two CSS 
classes: 'up' corresponding to the thumbsUp image, and 'down' corresponding 
to the thumbsDown image. You can set the class of the sentiment <p> 
dynamically using the setAttributeO method. Set the class to 'up' if the data, 
sentiment is greater than 0 (line 19). to ‘down’ if it’s less than 0 (line 22). and to 
‘none’ otherwise (line 25). Take a quick peek at 'widgetcss' if you want to see 
the styling used for the widget. 

001 var aWorker = new Worker("worker.js”); 

002 aWorker.onmessage = onWorkerMessage; 


003 

004 var thumbsUp = new Image(); 

005 thumbsUp.src = "thumbsUp.png"; 

006 var thumbsDown = new Image(); 

007 thumbsDown.src = "thumbsDown.png”; 

008 

009 function onWorkerMessage(evt) { 

010 data = evt.data; 

011 document.getElementById("search”).innerHTML = data.query; 
012 document.getElementById(”count").innerHTML = data.count; 

013 

014 var sentiment = document.getElementById("sentiment"); 

015 sentiment.innerHTML = data.sentiment; 

016 var hand = document.getElementById("hand”); 

017 if (data.sentiment > 0) { 

018 hand.style.backgroundlmage = "url(’thumbsUp.png’)"; 

019 sentiment.setAttribute(”class", "up”); 

020 } else if (data.sentiment < 0) { 

021 hand.style.backgroundlmage = ”url(’thumbsDown.png’)"; 

022 sentiment.setAttribute("class", "down"); 

023 } else { 

024 hand.style.backgroundlmage = "none"; 

025 sentiment.setAttribute(”class", "none"); 

026 } 

027 } 

Test your code 

We’re finally ready to test the code. Load the file 'manager.html’ in your 
browser, and you should see the Twitter widget. If you are not seeing the 
values you expect, check to make sure you are using HTTP to serve the file; 
some browsers have security restrictions that do not allow you to use web 
workers if you aren’t using a server. So either use a localhost server or upload 
your files to your site for testing. Make sure that you try some different search 
queries: that is. a few that have more positive sentiments and a few that have 
more negative sentiments. Also ensure you use terms that have plenty of 
tweets associated with them so you can see the values updating. 

Tweak the font size 

Depending on the length of the search term you use. you may need to 
adjust the font size. In widgetcss, look for the p#search selector, and adjust the 
value for the font-size property (line 3). 

001 p#search { 

002 color: #d9bd8f; 

003 font-size: 400%; 

004 margin-top: 0px; 

005 margin-bottom: 0px; 

006 padding-top: 0px; 

007 padding-bottom: 25px; 

008 } 

009 

Summary 

As you can see, web workers give you a new way to package up 
background tasks that are doing JSONP-style data retrieval from web services. 
Unlike the complexity of adding JSONP in the main page code, with the Web 
Workers API we can use the convenient importScriptsO function to make the 
requests, and have them done on another background thread as well. 
Experiment with your own uses of web workers, especially for those tasks that 
are computationally intensive. 
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Championing the talents of 
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Nelleke Vein der Maas 

web www.designedbynelleke.com 



Current role Senior designer & creative team lead at NATIVE. 
Cape Town 

Education Graduate in graphic design 
Expertise Over seven years' experience in designing and 
conceptualising digital campaigns and websites 
Clients Canon. Gucci. General Motors, L'Oreal, Nedbank, 
Nivea 

Twitter @HelloNelleke 


Nelleke began her career in digital media in 
2005 at 19 years of age, working as a junior 
designer for agency MediaCatalyst. She 

rolled into the job by chance via her cousin 
who was an intern there. MediaCatalyst 
needed someone that could 'do Photoshop' 
and luckily that was one of her skills. She 
started by designing static banners and within 
six months had risen up through the company 
ranks to become lead designer, working on 
international campaigns for Sony Europe. 

After three years she decided to start her 
own company, as she wanted to gain 
experience working with different agencies. 
Since then she has freelanced for a few years, 
collaborating with Holland's leading digital 
agencies like Tribal DDB. Euro RSCG, LBi. Blast 
Radius. StrawberryFrog and Achtung! 


Nelleke believes that her passion for 
interactive design stems from the fact that the 
industry is a constantly mutating and evolving 
beast. "It keeps you on your toes and you 
never stop learning. I love that with every 
project I can learn to improve usability and 
apply new technologies, which helps me to 
create more and more memorable 
experiences,” Nelleke explains. 

She gets her design inspiration mostly 
online, from social networks and content 
aggregation sites such as Behance. Pinterest. 
Vi.sualize.us and Dribbble; but also through 
magazines, books and colleagues. 

She’s recently moved to Cape Town, South 
Africa, where she is currently working full-time 
for digital agency NATIVE as a senior designer 
and creative team lead. 



01 

Digital version of 'pass the parcel’. The 
parcel was wrapped in almost a 
hundred layers, then she unwrapped 
and photographed to create a 
stop-motion animation. 


02 

International campaign for Philips called 
'See what light can do’. The layout uses 
flexible modules to accommodate new 
videos and products, which would be 
added over the years. 


03 

This YouTube-based competition is part 
of the Parallel Lines campaign. Nelleke 
crafted a cinematic look and feel using 
the Philips 21:9 television as a screen. It 
received three Cyber Lions nominations. 


04 

Dettaglio offers exclusive driving tours, so the 
design had to reflect this sense of innate 
exclusivity and elitism as well. The 280 images 
on the site do a great job of showcasing the 
cars, and pull you into the experiences. 
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Peter Hvezda 

web www.digitaldementia.ca 



Currentrole Founder, designer and developer at Digital Dementia 
Education Bachelor of Computer Science 
Expertise HTML5, CSS3, Java. JavaScript. PHP. Drupal. 

Word Press, Adobe Photoshop, object-oriented 
design, user interfaces, computer modelling 
Clients PacificSport Northern BC, Powell River Library, 
Friends of Children Society. Ohh... Chocolat Cafe 
Twitter @Dig_Dementia 


Despite his aspirations to become a 
commercial artist after selling his first 
commission at the age of 12, Peter ultimately 
decided that he didn’t want to live the 
impoverished life of an artist and decided to 
get into computers instead where he could 
still utilise his creativity. After graduating with 
an Honours Bachelor of Computer Science 
degree from Carleton University, he went on to 
develop highly innovative software in various 
positions across Canada. But these jobs only 
exercised the logical side of his mind and Peter 
longed to return to his artistic roots, so he 
decided to start his own web-design business. 

He started Digital Dementia, a web-design 
company that services clients throughout 
western Canada. He enjoys the challenges and 


opportunities that running your own business 
presents; there is never a dull moment which 
leads him to joke that he has the freedom to 
choose which 20 hours of the day he would 
like to work. 

He draws his inspiration from the people, 
places and items around him. He has very 
strict standards by which he evaluates the 
latest design trends to ensure that, beyond the 
glitz, they provide functionality that elevates 
the user experience. He is a big believer in 
collaborating with his clients and with other 
designers in order to produce the best 
possible product. 

When not sitting in front of a computer, he is 
out hiking with his wife among the beautiful 
mountains of British Columbia’s backcountry. 


INTERCONN E( 




Our Members 




01 

Designed in collaboration with 
another designer, this extends 
the organisation's existing brand 
to the web while conveying a 
sense of energy and inspiration. 


02 

The site has a clean, simple look 
that utilises lots of white space. 
The client requested a site that is 
easy to maintain with all the 
content and features they need. 


03 

This website was redesigned to 
make finding that important 
information an efficient and easy 
affair using large buttons that 
are very mobile friendly. 


04 

Designed to highlight Ohh... 
Chocolat Cafe’s products along 
with a touch of whimsy. Lush 
pictures with tempting taglines 
were the order of the day. 


05 

Warm, rich tones were used to 
convey the sense of informality 
this group is known for, while 
retaining a professional feel for this 
business networking website. 
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Dimo Shterionov 


web www.coggraphics.com 



Current role Web designer at Cog Graphics 
Education Marketing and Advertising at New Bulgarian 
University 

Expertise Adobe Suite. HTML, CSS, WordPress. user interfaces, 
photography 

Clients Dunkin’ Donuts Bulgaria. Sportdelivery.com. 

BB-team.org, Grand Foods 
Twitter @ZiuzExtra 


Dimo has worked in web design for six years, 
and every new site is a challenge with new 
opportunities for innovative solutions. He 

started his career as a photographer, but later 
found an attraction to the worldwide web and 
the ability to create something living that 
constantly changes and evolves. 

He draws inspiration from his morning 
coffee, good work atmosphere, and his close 
friends. For him ideas and solutions don’t 
come spontaneously. They are connected 
with a set of well-described goals and the 
potential for development. His passion is to 
apply the latest in design and development 
technologies for a better user experience. 

He works as a web designer in a small 
studio with big potential, called Cog Graphics 
in Sofia. Bulgaria. The studio builds media 
portals and online shops powered by custom 
software - Machina (machinashop.com). 
Specialised in the creation of brand identity as 
well as building websites. Cog concentrates on 
the user interface and the simple lines that 
serve the content in the best possible way to 
the end-user. 

At Cog Graphics, the creation of a website 
doesn’t finish when the product is handed 
over to the client. “Client work is always 
intriguing; says Dimo. "The opportunity to 
work on sites in different areas of business 
keeps you in a state of constant creative flow. 
A great deal of our clients take extra steps to 
take care of their users, and in our joint effort 
we improve the information presentation 
according to their needs.” 

Outside the workplace he is a keen 
sportsman. He loves to be outdoors and to 


travel to new destinations. “Keeping in shape 
helps me stay concentrated and full of energy. 
This helps me to make the right decision in the 
work process. The opportunity to meet new 
people and cultures is part of evolving and 
helping to think outside of the box.” 



01 

Photos designed to make you 
crave the products. The huge 
navigation section for the 
categories helps you view every 
delicious bit of the menu. 


02 

A big site for sports news and 
commentary. The main goal was 
for the user to browse to every 
part of the site where they'll find 
trivia, polls and lots more. 


03 

This website was redesigned to 
make finding that important 
piece of information efficiently 
and easily using large, 
mobile-friendly icons. 


04 

Custom-made icons that 
represent the agency’s activity. 
Great use of white space, 
typography and a very 
interesting blog implementation. 


05 

Light and fast site. Implements a 
host of custom banners for 
advertising and promotion 
partnered with a neat and 
effective user interface. 
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EXTEND CSS3 
WITHSASS 

Design with Syntactically Awesome 
Stylesheets by mastering this popular 
new syntax extension 


PROFILE: 
LESS RAIN 

A refreshing creative outlook 
from this D&AD, BIMA and 
Webby Award-winning agency 


DISCOVER 

NODE.JS 

The new Ruby on Rails? Start our 
two-part first-look at developing 
with this buzz technology 


DESIGN DIARY: 
HARD GRAFT 

How to make a silk purse site from 
some handmade leather bags in 
our latest project in the spotlight 
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Los Angeles 


Digital arts are on the rise in the City of Angels. 
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Today, Los Angeles is 
being billed as the ‘creative 
capital of the world’ 



identity and design company, but with the 
emerging digital space and online marketing, its 
focus grew. As an integrated creative agency, 
STARMEN uses the many facets of digital 
communication and technology to facilitate 
measurable brand growth and produce results. It 
strives to produce high-impact digital campaigns 
and create brand experiences that engage, 
inspire and entertain. 


STARMEN Design 
Group, Inc 

www.starmenusa.com 

STARMEN Design Group began as a brand 


Making Brands Work 



Lights, camera, action! 
Entertainment and digital media 
are the heart and soul of LA 
culture today, making it a 
priority destination for digital 
creatives from all disciplines, 
and all walks of life 


T he city of Los Angeles holds many 

distinctions: year-round beautiful weather, 
beaches stretching the length of the southern 
California coast and the unprecedented 
diversity of its cultural landscape. But the 
heart of Los Angeles, and by far its most 
famous destination, is Hollywood, the 
'entertainment capital of the world. Widely 
regarded as the international hub for movies, 
television and music production, Hollywood is 
so influential in the field of entertainment that 
even the word itself - Hollywood - is often 
used as a synonymous expression of the 
industry as a whole. 

The world-famous Hollywood sign has long 
been an iconic symbol for actors, writers, 
directors, musicians and other bright-eyed 
creatives: something of a ‘Bat-Signal’ to the 
entertainment promised land. The sign's 
aspirational message has been the same for 
decades: this is a place where magic is 
possible, where dreams can come true. 

Today. Los Angeles has expanded beyond 
just film and music, however and is being 
billed more generally as the ‘creative capital of 
the world', due to the fact that one in every six 
of its residents works in one (or sometimes 
more) of a wide variety of creative industries. 
The emergence of new digital industries in 
the City of Angels has allowed a new breed of 
talent to emerge on the scene. Hollywood’s 
next generation of rising stars are now 
animators, digital effects artists, motion 
graphics artists and web designers. 

One of Hollywood's popular new digital 
mediums is branded video entertainment. 
Video production companies and marketers 
are working in collaboration with web 
designers to leverage many social media 
concepts and bring digital content such as 
branded entertainment, viral web series and 
YouTube channel content to a broader 
audience, expanding the online presence of a 
vast array of businesses. 

Los Angeles is the perfect environment for 
the success of such a growing industry 
because of its unique combination of 
historical creativity, entertainment resources 
and insatiable appetite for innovation. 
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f BLITZ 

www.blitzagencY.com 

An integrated agency with one goal: develop sustainable 
relationships between their clients and their customers. By 
creating engaging and highly imaginative campaigns, applications 
and platforms, BLITZ helps brands become a seamless part of their 
audience’s everyday lives. BLITZ designs and engineers a 
commercial derivative of love. 


Threshold 
Interactive 

www.thresholdinteractive. 

com 

Threshold Interactive is a full-service 
agency that works together with its clients 
to move ideas from bold strategies to 
imaginative completion, using a core 
team of highly talented creatives working 
collectively. It is this process that drives 
Threshold Interactive to be unique. 




Hello Design 

www.hellodesign.com 

Hello is a creative digital 
agency that creates 
intelligent, living systems for people 
to experience, and believes in 
building systems that are useful, 
usable and desirable. From brand 
identities to immersive online 
experiences to touchscreen kiosks, 
Hello is always looking to innovate. 



Huge 

www.hugeinc.com 
Huge is responsible for core digital 

implementation for some of the 
largest companies and brands in the world. 
The company has evolved a methodology 
and a culture that combines the most 
powerful aspects of research, user-centred 
design, technology and marketing to meet 
client objectives. 
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- | The Hollywood 
o sign, a worldwide 

symbol of the 
entertainment industry 
was conceived as an 
outdoor ad campaign 
for a suburban housing 
development called 
Hollywoodland. 


JohnTerceman, 
UX manager 

Amoeba Music 


It’s a great neighbourhood place to get coffee, free 
internet and good food. This is the perfect spot when 
you just want to get out of the office, where you can 
stay for hours and enjoy one of the signature crepes. 


After a long day of work, you may find me winding 
down, drinking some fine Belgian beer at Wurstkiiche 
in Downtown LA’s arts district. I just live my life one 
line of code at a time. 


I’m usually busy trying to make the world a better 
place one interface at a time. In my free time I hit up 
a Hollywood landmark - Amoeba Records - and 
browse its huge collection of vintage music. 


trend map 


99 














































































Talent directory 

Whether you need to hire web-desiqn services or just want to 


Get 

listed here 

Find out how to add your agency to our chart 
by contacting the team at the following address: 


© webdesigner@imagine-publishing.co.uk. 


Whether you need to hire web-design services or just want 
locate the trade’s best creative teams, our chart can help... 




2Advanced Studios 

www.2advanced.com 


City Aliso Viejo 
Telephone 1949 521 7000 
Contact info@2advanced.com 
Clients Adobe. Bacardi. Diesel 


Country USA 
Twitter ID 2advanced 


EADVAN CG D 


Established in 1999,2Advanced is an award-winning interactive agency dedicated 
to pushing the creative boundaries of design and technology to deliver high-impact, 
rich media solutions. It boasts an exceptional reputation in Adobe Flash design and 
offers a host of services including interactive design, CMS solutions, eCommerce, 
motion graphics, 3D illustration and video production. 



Addictivity 
Agency Republic 
AKQA 

Angel London 
AWP New York 


www.addictivity.com 

www.agencyrepublic.com 

www.akqa.com 

www.angellondon.co.uk 

www.awpny.com 


London 
London 
London 
London 
New York 


UK 

USA 


0845 838 6718 hello@addictivity.com 

44 (020 7942 0000 chat@agencyrepublic.com 

(0)20 7780 4786 inf o@a kqa com 

0845 468 0959 info@angellondon.co.uk 

607 277 2757 www.awpny.com/pages/feedback 


addictivity Hitachi. Kickers, Motorola 

agencyrepublic adidas, EA. BBC, BP, 02 

AKQA Coca-Cola, Virgin, McDonald's, Nike, Visa. Xbox 

angellondon Sony Pictures, Chelsea FC, MTV, BT 

AWPNY Accufab. Cornell University 


ft 
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Azexis 

www.azexis.com 

City Ipswich 

Telephone 01473 694500 
Contact sales@azexis.com 
Clients BBC, Kia, Business Link. LSC 


Country UK 
Twitter ID Azexis 


©A. 


XI 


With a heritage in design and development since 1999, Azexis is an interactive 
agency with a talented team of specialists all sharing a single drive: to produce the 
best design, web and mobile solutions encompassing extraordinary functionality 
and creative design. Azexis offers a diverse range of services and supports an 
impressive array of clients worldwide. 
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BBH Global 

www.bartleboglehegarty.com 

London 

UK 

(0)20 77341677 

richard.stainer@bbh.co.uk 

bbhlondon 

Axe, Baileys, LG, Sprite, Heineken 

BGT Partners 

www.bgtpartners.com 

Chicago. IL 

USA 

1 888 282 2487 

bgtla@bgtpartners.com 

dldarke 

Burger King, FedEx. Walt Disney 

Big Youth 

www.bigyouth.fr 

Paris 

France 

171183100 

contact@bigyouth.fr 

N/A 

AOL, Sony Ericsson, Nivea, Orange 

Big Spaceship 

www.bigspaceship.com 

New York 

USA 

1 718 222 0281 

biz@bigspaceship.com 

bigspaceship 

Sony Pictures, Microsoft, Victoria’s Secret 

Birth 

http://birth.se 

Stockholm 

Sweden 

46(0)84115775 

hello@birth.se 

N/A 

Red Bull. DDB Paris. McDonald's. DHL, Telenor 

Blitz 

www.blitzagency.com 

Santa Monica, CA 

USA 

310 551 0200 

www.blitzagency.com/contact.aspx 

BLITZagency 

Activision. Google. Starbucks 

BluelnkAgency.com 

www.blueinkagency.com 

Grimsby 

UK 

0790 558 8144 

enquiries@blueinkagency.com 

BluelnkAgency 

Hein Gericke, Nicholas Deakins, Crane Gregory 

Breathe 365 

www.breathe365.com 

Liverpool 

UK 

0151324 0188 

lnfo@breathe365.com 

N/A 

Saatchi & Saatchi, Siemens 

BURN 

www.burnmarketing.com 

Richmond, Surrey 

UK 

020 8332 7204 

www.burnmarketing.com/contact-us 

BURNMARKETING 

lastminute.com, eBay, 02, One Water 

Carsonified 

http://carsonified.com 

Bath 

UK 

01225324 980 

hello@carsonified.com 

carsonified 

N/A 

Catch Digital 

www.catchdigital.com 

London 

UK 

0207 494 3554 

hello@catchdlgital.com 

catch.digital 

Orange. Heilman's, Crest Nicholson, Altitude 

Chunk 

www.chunk.co.uk 

Glasgow 

UK 

0141353 0876 

hello@chunk.co.uk 

chunktwits 

Kronenbourg. Cadbury's. Volvo 

CHIPS 

http://chips-ny.com 

New York 

USA 

N/A 

office@chips-ny.com 

chipsny 

Top Magazine, Joffrey, d’employ, Matt Creed 

Ciplex 

www.ciplex.com 

Los Angeles, CA 

USA 

13104610330 

www.ciplex.com/contact_us.html 

ciplex 

Upper Deck, Von Dutch 

Clearleft 

http://clearleft.com 

Brighton 

UK 

0845 838 6163 

info@clearleft.com 

clearleft 

WWF, Universal Networks. Mozilla 

Code23 

www.code23.com 

Reading 

UK 

44(0)118 9306717 

www.code23.com/contact/ 

code23 

Oasis James, Sony Style. Adams Estates 

Content Formula 

www.contentformula.com 

London 

UK 

02073816671 

moreinfo@contentformula.com 

contentformula 

Johnson & Johnson, Kraft, Bausch & Lomb 

Coolpink 

www.coolpink.net 

Leeds 

UK 

44113201 8290 

discovermore@coolpink.net 

coolpink 

Asda. NHS, Warner Music. Halfords 

Cre8 New Media 

www.cre8newmedia.com 

Ruislip 

UK 

01707 394 962 

info@cre8newmedia.com 

N/A 

Agenda Recruitment, Ocean Group 

Creare Design 

www.webdesigncreare.co.uk 

Leicester 

UK 

01455 88 37 00 

enquiries@creare.co.uk 

crearegroup 

Nicky Clarke, Life Music Foundation. Iveco 




Critical Mass 

www.criticalmass.com 


City London ; Country UK 

Telephone +44 20 8735 8750 i Twitter ID criticalmass 
Contact newbusiness.europe@criticalmass.com 
Clients Rolex. NASA, HP, adidas 


CRITICAL MASS 


A leading, full-service digital agency with offices in Toronto. New York and London. 
Critical Mass offers 15 years' industry experience, having been founded in 1996. 
Services include project planning, experience design, content marketing, social 
media strategies and rich technology development - to name just a few. 



d2x 

www.d2x.co.uk 

Basingstoke 

UK 

07512 076360 

info@d2x.co.uk 

d2x_co_uk 

Altro, Walkingworld 

Dare London 

www.daredigital.com 

London 

UK 

44(0)203 451 9101 

london@thisisdare.com 

thisisdare 

Sony Ericsson. Hovis, Tetley. Penguin 

Delete 

www.deletelondon.com 

London 

UK 

0203 004 7155 

info@deletelondon.com 

DeleteLondon 

Red Bull. Oecca Records 

Dizzain 

www.dizzain.com 

New York 

USA 

44(20)3290 9941 

mail@dizzain.com 

dizzain 

Webhuset, Financial Times, HIS Textiles, QxLab 

Digital Jigsaw 

www3.digltaljigsaw.com 

London 

UK 

0870 235 4042 

info@digital-jigsaw.com 

digitaljigsaw 

PepsiCo, Walkers. Budweiser 

Digital Marmalade 

www.digitalmarmalade.co.uk 

Beckenham. Kent 

UK 

44(0)20 8249 5655 

info@digitalmarmalade.co.uk 

N/A 

Monarch. Yell.com. Trevor Sorbie 

Disturb Media 

www.disturbmedia.com 

London 

UK 

020 71383569 

contact@disturbmedia.com 

disturbmedia 

Swatch/MTV, Hertz 

Domani Studios 

http://domanistudios.com 

New York 

USA 

312 850 2919 

biz@domanistudios.com 

domanistudios 

Sheraton. Porsche. VW 

DRIFTLAB 

www.driftlab.com 

Atlanta, GA 

USA 

678 225 4351 

howdy@driftlab.com 

driftlab 

General Motors, Ford, Sony 

eckhoCreative 

www.eckhocreative.com 

Bristol 

UK 

01179 070273 

info@eckhocreative.com 

eckhoCreative 

Rocket Music Management. Nexus TV, ITV, CEF 

Fi 

www.f-i.com 

New York 

USA 

212 9415220 

interact@f-i.com 

F_l 

Google. HTC, BBC, Fox. Porsche. Burton, EA 

Firstborn 

www.firstborn.com 

New York 

USA 

212 5811100 

info@fborn.com 

firstborn.nyc 

Apple, Doritos, Pepsi, Wrigley 

Fluid Creativity 

www.fluidcreativity.co.uk 

Hyde, Cheshire 

UK 

0845 6588 373 

info@fluidcreativity.co.uk 

fluidcreativity 

American Soda, Brother. NHS 

Form 

www.form.uk.com 

London 

UK 

020 70141430 

studio@form.uk.com 

N/A 

BBC. VH1, Cutty Sark Whisky 

Glass Slipper 

www.glassslipperinteractive.com 

Banbury 

UK 

01295724568 

glasssliperinteractive.com/contact.php 

dpaultaylor 

Nexus Interiors, bell systemz 

glue Isobar 

www.glueisobar.com 

London 

UK 

020 7739 2345 

md@glueisobar.com 

glueisobar 

Oasis, The Sun 

GR/DD 

www.grdd.co.uk 

London 

UK 

020 7729 4222 

mail@grdd.co.uk 

GRDD.London 

PlayStation, Warner Bros, Symantec, Nokia 

Guerilla 

www.guerilla.co.uk 

Newcastle 

UK 

4401912619799 

enquiries@guerilla.co.uk 

we_are_guerilla 

Network One, Green Metropolis 

Hi-ReS! 

www.hi-res.net 

London 

UK 

02077293090 

info@hi-res.net 

N/A 

Chanel, Dolce & Gabbana, Nike 
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Featured agency: TORY www.toky.com 

A closer look at what each listed agency has to offer the community 



TOKY is an American agency with offices in St Louis, 

MO, and Washington DC, offering interactive services, 
branding and strategy. Winner of numerous industry 
accolades including several Webby Awards, its mantra 
of ‘Logic is beautiful’ encapsulates a very considered 
approach to meeting each client’s needs. Asking the right 
questions at the start of the creative process is key, placing 
a great emphasis on requirements research. ‘Creative 
effectiveness is the result of fabulous talent applied to 
sound strategy,’ reads the website. We say amen to that! 






JUXT Interactive 

www.juxtinteractive.com 

San Francisco. CA 

USA 

949 610 0800 

info@juxtinteractive.com 

juxtinteractive 

Sprite. Cisco. American Airlines. BMW. Adobe 

Kokokaka 

www.kokokaka.com 

Gothenburg 

Sweden 

031 711 5450 

contact@kokokaka.com 

KOKOKAKA 

Burberry, IKEA, Wrangler 

Kudos Web Design 

www.kudoswebdesign.co.uk 

Manchester 

UK 

01612365585 

info@kudoswebdesign.com 

N/A 

Tetra Pak, Taboo 

KURO 

www.kuro.la 

Long Beach. CA 

USA 

562 4945070 

projects@kuro.la 

N/A 

N/A 

Liquid Light 

www.liquidlight.co.uk 

Brighton 

UK 

08456 58 88 35 

info@liquidlight.co.uk 

liquidlightuk 

Antwords.Charcol, Gifford 

Lonely Duck 

www.lonelyduck.se 

Stockholm 

Sweden 

46 70 689 96 02 

hello@lonelyduck.se 

LonelyDuckSTHLM 

Puma. New Balance, Bentley 

Lounge Lizard 

www.loungelizard.com 

New York 

USA 

1-888-444-0110 

info@loungelizard.com 

kenbraun 

America Online. Disney Interactive 


Lyrical Media 


www.lyricalmedia.com 


02081231567 


lyricalmedia.com/contact 


Virgin Atlantic. Ubisoft 


*1 





I IMUT1BNOT 



_ 

If 


Mutado 

mutado.com 

City Milan 

Telephone 39 02 34592733 
Contact hello@mutado.com 
Clients Vodafone. Yahoo!. Nike 


Country Italy 
Twitter ID mutado 


Mutado 


Mutado was formed in 2004 by Lorenzo Manfredi and Mauro Gatti: a developer and a 
graphic designer whose paths crossed over a decade ago. During the last eight years, 
it has grown into a solid independent digital agency, headquartered in Milan. The 
company's name relates to Mutado's constant mutation, adaption and transformation. 



Next Digital 

www.nextdigital.com 

Sydney 

Australia 

612 9336 7500 

sydney@nextdigital.com 

nextdigital 

Brisbane Water, Qantas 

Night Agency 

www.nightagency.com 

New York 

USA 

212 4311945 

info@nightagency.com 

nightagency 

Champion. ESPN. MTV. 20th Century Fox 

North Kingdom 

www.northkingdom.com 

SkellefteS 

Sweden 

020 7749 5353 

info@northkingdom.com 

NorthKingdom 

Coca-Cola. Vodafone, adidas 

Nzime 

www.nzime.com 

Nottingham 

UK 

0115 950 9720 

people@nzime.com 

nzime 

Elastoplast, Microsoft Game Studios. Knox 

OMdeSIGN 

www.omdesign.co.uk 

London 

UK 

0208248 2712 

contact@omdesign.co.uk 

omdesign 

City of London, Loft King, The Hokey Cokey Man 

Orange Bus 

www.orangebus.co.uk 

Newcastle 

UK 

0191 241 3703 

stuff@orangebus.co.uk 

@orangebus 

Barclays. Sage Pearson 


Podl 

POKE London 

Razorfish 

Reactive 


www.pod1.com 

www.pokelondon.com 

www.razorfish.com 

www.reactive.com 


London 
London 
Seattle. WA 
London 


020 75247660 
2077495353 
1206 816 8800 
44(0)20 7550 8200 


www.podl.com/contact-us Podl 

www.pokelondon.com/contact pokelondon 

www.razorfish.com/#/reach-us/email-us Razorfish 

uk.enquiries@reactive.com reactivemedia 


Tesco. Shell. Kenwood 
Skype, Orange. Yahoo! 
adidas. Audi. Dell. 02 
Lee Jeans. British Airways. NEC 



Resn 

www.resn.co.nz 


City Wellington : Country New Zealand 

Telephone +64 4 385 0705 : Twitter ID resn_has_no_i 

Contact newbusiness@resn.co.nz 
Clients Toyota Racing. BlackBerry. MTV 


Resn* 


Independently owned and based in New Zealand’s capital city. 
Resn is one of Australasia's most-recognised agencies, having 
scooped FWA, Webby. SXSW and Pixel awards. Founded in 
2005 by Steve Le Marquand and Rik Campbell, the team is 
known for an innovative web and interactive portfolio of 
projects for a high-profile client list. 



SimpleBits 

http://simplebits.com 

Salem, MA 

USA 

N/A 

contact@simplebits.com 

simplebits 

MTV. AIGA. Google. ESPN 

Soak Digital 

www.soak.co.uk 

Norwich 

UK 

01603 630631 

www.soak.co.uk/contact-us.php 

SoakDigital 

Axa, Harley Davidson. UEA. Archant 

Solid State Group 

www.solidstategroup.com 

London 

UK 

0207613 7220 

info@solidstategroup.com 

solidstategroup 

Sony, Shell. Amnesty International 

Striker Digital 

www.striker-digital.com 

Prague 

Czech Rep. 

+42(0)257312 707 

hello@striker-digital.com 

strikerdigital 

Mullermilch, STV. BP 

Sweden Unlimited 

www.swedenunlimited.com 

New York 

USA 

212 9415904 

info@swedenunlimited.com 

swedenunlimited 

Vera Wang 

TAMBA Internet 

www.tamba.co.uk 

London 

UK 

0203 0085110 

info@tamba.co.uk 

TAMBAJnternet 

Carphone Warehouse. EMI 

TOKY 

www.toky.com 

St Louis 

USA 

314 534-2000 

info@toky.com 

N/A 

HOK, McCarthy. Cahokia Mounds 

Tomato 

www.tomato.co.uk 

London 

UK 

0207490 2599 

lnfo@tomato.co.uk 

N/A 

Citroen. Ford Ka. dunhill 

Tribal DDB LA 

http://tribalddb.com 

San Francisco. CA 

USA 

415 7323600 

mike.parker@us.tribalddb.com 

TribalDDB 

Hasbro. McAfee, McDonald's 

ultranoir 

www.ultranoir.com 

Paris 

France 

014271 4836 

online form 

ultranoir 

eBay, HSBC, Peugeot. Lacoste, Thomas Cook 



Underwired Amaze 

www.underwired.com 

City London j Country UK 

Telephone 020 7060 0400 : Twitter ID underwired 

Contact hello@underwired.com 
Clients McCain Foods. Peugeot. Virgin. ASICS. NSPCC 


u*tjdj&rivlr&cl 


Now part of the Amaze network of companies after a 2009 merger. Underwired was 
founded as an agency 15 years ago. Started by Ruth Brecher. Jason Holland and 
Felix Velarde, it has become synonymous with customer engagement campaigns 
spanning websites, email newsletters, mobile applications and social media. 



(untitled) 

www.untitledlondon.com 

London 

UK 

020 78717939 

fanmail@untitledlondon.com 

untitledlondon 

Hasbro. Spar, Lloyds TSB, Sky. Sony 

The Value Engineers 

www.thevalueengineers.com 

Beaconsfield 

UK 

01494 680999 

info@thevalueengineers.com 

ValueEngineers 

BP. Orange. Sony 

Vibe Creative 

www.vibecreative.co.uk 

Shrewsbury 

UK 

0845 263 7989 

studio@vibecreative.co.uk 

vibecreative 

E&J Jewellers, Somerset Housing 

Vivid Creative 

www.vividcreative.com 

Sheffield 

UK 

0114 261 7060 

info@vividcreative.com 

Vivid.Creative 

N/A 

Webheads 

www.webheads.co.uk 

London 

UK 

02072877060 

info@webheads.co.uk 

webheadsdigital 

BBC. NHS, Texaco 

Wevio 

www.wevio.com 

New York 

USA 

1212 5379432 

contact@wevio.co.uk 

Wevio 

Samsung. IBM. Verizon 

Wickedweb 

www.wickedweb.co.uk 

London 

UK 

020 7183 4999 

www.wickedweb.co.uk/contact 

InsideWickedweb 

Nectar, Kurt Geiger. NSPCC 

Wieden+Kennedy 

ww w.wkam st.com 

Amsterdam 

Holland 

31.20.7126.500 

lee.newman@wk.com 

WKAmsterdam 

EA. Heineken, Nike 

Your Majesty 

www.your-majesty.com 

New York 

USA 

212 685 3427 

info@your-majesty.com 

yourmajestyco 

Hyundai. Cisco. Yahoo! 

The Zen Agency 

www.thezenagency.com 

Glasgow 

UK 

01412291333 

online form 

zenagency 

The HALO Trust. Mackie's. Hilton 
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designer Subscriptions Voucher 


\*S YES! I would like to subscribe to Web Designer 

Your details 

Title_First name_ 

Surname_ 

Address_ 


Postcode_ 

Telephone number. 

Mobile number_ 

Email address_ 


.Country. 


Please complete your email address to receive news and special offers 


Direct Debit Payment 

UK Direct Debit payment 

Pay only £25.15 every six issues (save 30%) 


tra 


Instruction to your Bank or 
Building Society to pay by Direct Debit 

*m*“ Please fill in the form and send It to Imagine Publishing Limited. 800 Guillat Avenue Kent Science Park. Sittingbourne. ME9 8GU 


^I^Vdirect 

^/Debit 


Name and full postal address of your Bank or Building Society 


Bank/Building Society 


Originator's Identification Number 


| 5 0 


1 8 8 


I I I I I I I I I I I I I I 


passed on electronically to my Bank/Bu tiding Society 


Branch sort code 


III 1 


Bank/BuBdlng Society account nu 


i i i i ' I 


Banks and Building Societies may not accept Direct Debit Instructions for some types of account 


Payment details 

YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 

n UK £62.30 (Save 20%) I Europe £70 n World £80 

Cheque 

r I enclose a cheque for £L_ 


(made payable to Imagine Publishing Ltd) 

Credit/Debit Card 

Visa I MasterCard I Amex I Maestro 

Card number Expiry date 

1 i i i I i i i I i i i I M i I I M i I 

Security number rnr (last three digits on the strip at the back of the card) 

Issue number I I (if Maestro) 


Signed_ 

Date_ 

Code: PAG196 

r Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 
r Tick this box if you do not wish to receive promotional material from other companies. 

Terms and conditions apply. We publish 13 issues a year. Your subscription will start from the next available 
issue unless otherwise indicated. Direct Debit guarantee details available on request. This offer expires 
without notice. 

I would like my subscription to start from issue: l-J—LI—I 

Return this order form to: 

Web Designer Subscriptions Department, 800 Guillat Avenue, 

Kent Science Park, Sittingbourne, ME9 8GU, or email it to 

webdesigner@servicehelpline.co.uk 


Manage your subscription account online at www.imaginesubs.co.uk 


THREE WAYS 

TO SUBSCRIBE 

?• Online 

Order via credit or debit card, just visit: 

www.imaginesubs.co.uk/wed 

and enter code PAG196 

* Telephone 

Order by phone, just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 
and quote code PAG196 

«• Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 



GO DIGITAL! 


GREAT DIGITAL SUBSCRIPTION 
OFFERS AVAILABLE AT: 

imaginesubs.co.uk 

FOR ANDROID, MAC, PC 
iPHONE & iPAD 


















































Let Web Designer unleash your creative side! 

Subscribe now and 

SAVE 30% 

The only magazine you need to design and develop stunning websites 
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<o» **v Our web-hosting guide is brought to you in association with 

f «■ % Fasthosts, the UK’s leading reseller web-hosting provider 

• Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 

• Unlimited web space • No-risk trial - 3 months free 


I Hosting listings 


Dm 


Got a deal 
you think we 
should list? 


Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

| webdesigner@imagine-publishing.co.uk 


NAME AND URL 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



1&1 


1&1 Internet Ltd. 

www.1and1.co.uk 


1&1 Starter (Linux) 

1&1 Standard (Linux) 
1&1 Standard (MS) 

1&1 Unlimited (Linux) 
1&1 Unlimited (MS) 
1&1 Business (Linux) 
1&1 Business (MS) 


08443351211 £29.88 5GB Unlimited 1,000 / A/ // / / X 

08443351211 £59.88 50GB Unlimited 3,000 / ✓ / / / X 

08443351211 £71.88 50GB Unlimited 3,000 / X/ / / / /X 

08443351211 £83.88 Unlimited Unlimited 5,000 ✓ / / ✓ / / / 

08443351211 £107.88 Unlimited Unlimited 5,000 / X / / / / / 

08443351211 £119.88 Unlimited Unlimited Unlimited / // / // /X 

08443351211 £155.88 Unlimited Unlimited Unlimited / X/ / / / /X 


iiiiA/nkU/\p4 i 111WebHost.com 
llWebHOSt 8 http://111webhost.c 


mivcuMvat.wiM Unlimited Web Hosting Pack N/A 

° http://111webhoSt.com starter Web Hosting Pack N/A 
Budget Web Hosting Pack N/A 

WordPress Web Hosting Pack N/A 
Drupal Web Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
osCommerce Web Hosting Pack N/A 
ZenCart Web Hosting Pack N/A 
PrestaShop Web Hosting Pack N/A 


£60 Unlimited Unlimited Unlimited / 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 


/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Starter 

0845 859 0018 

£29.88 

1GB 

5GB 

20 




/ 

/ 

✓ 

✓ 

123-reg (www.123-reg.co.uk) 

Plus 

0845 859 0018 

£59.88 

5GB 

50GB 

500 

✓ 



/ 

/ 

/ 

✓ 

123-reg (www.123-reg.co.uk) 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 



✓ 

✓ 

/ 

✓ 

123-reg (www.123-reg.co.uk) 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1,000 

/ 



/ 

/ 

/ 

✓ 

123-reg (www.123-reg.co.uk) 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

/ 



✓ 

✓ 

/ 

/ 

123-reg (www.123-reg.co.uk) 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 



/ 

/ 

✓ 

✓ 

123-reg (www.123-reg.co.uk) 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1,000 

/ 



✓ 

✓ 

✓ 

✓ 

2020Media (www.2020media.com) 

Light User 

0870 3212020 

£45 

20MB 

1GB 

3 

/ 

✓ 

✓ 

/ 

/ 

/ 

✓ 

2020Media (www.2020media.com) 

Everyday 

0870 321 2020 

£100 

200MB 

10GB 

15 

/ 

✓ 

/ 

/ 

/ 

✓ 

/ 

2020Media (www.2020media.com) 

Business/Pro 

0870 321 2020 

£275 

500MB 

20GB 

50 

/ 

/ 

✓ 

✓ 

/ 

/ 

/ 

2020Media (www.2020media.com) 

JAVA Tomcat 

0870 321 2020 

£300 

100MB 

3GB 

15 

/ 

✓ 

/ 

/ 

/ 

/ 

/ 

2020Media (www.2020media.com) 

ASP.Net 

0870 3212020 

£275 

100MB 

3GB 

15 

/ 

✓ 


✓ 

✓ 

/ 

✓ 

4D Data Centres (www.4dhosting.com) 

Bronze Package 

0845166 8386 

£40 

10MB 

500MB 

2 

/ 


✓ 

/ 

/ 

✓ 

✓ 

4D Data Centres (www.4dhosting.com) 

Silver Package 

0845166 8386 

£64.99 

20MB 

2GB 

10 

/ 


/ 

/ 

/ 

/ 

✓ 

4D Data Centres (www.4dhosting.com) 

Gold Package 

0845166 8386 

£79.99 

50MB 

2GB 

50 

✓ 


/ 

✓ 

/ 

/ 

✓ 

4D Data Centres (www.4dhosting.com) 

Titanium Package 

0845166 8386 

£149.99 

500MB 

5GB 

500 

/ 


/ 

/ 

/ 

/ 

/ 

4D Data Centres (www.4dhosting.com) 

Reseller Package 

0845166 8386 

£299.99 

1GB 

10GB 

1.000 

/ 


✓ 

✓ 

/ 

✓ 

✓ 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Home 

N/A 

£40 

500MB 

5GB 

5 

/ 

✓ 

/ 

✓ 


✓ 

✓ 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Business 

N/A 

£50 

1GB 

20GB 

100 

/ 

/ 

/ 

/ 


✓ 

✓ 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

/ 

/ 

✓ 

/ 


/ 

✓ 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Professional 

N/A 

£150 

3GB 

60GB 

300 

/ 

✓ 

/ 

/ 


/ 

/ 

Blacknight (www.blacknight.com) 

Minimus 

35359 918 3072 

£45 

10GB 

200GB 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Blacknight (www.blacknight.com) 

Medius 

35359 918 3072 

£79 

20GB 

400GB 

Unlimited 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

Blacknight (www.blacknight.com) 

Maximus 

35359 918 3072 

£45 

30GB 

600GB 

Unlimited 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

Bravo14 (http://bravo14.co.uk) 

Starter Linux 

N/A 

£130 

2.000MB 

2.000MB 

10 

/ 

✓ 

/ 

✓ 


✓ 

/ 

Bravo14 (http://bravo14.co.uk) 

Starter Windows 

N/A 

£20 

2,000MB 

2.000MB 

10 

/ 

✓ 

✓ 

/ 


✓ 

/ 

Bravo14 (http://bravo14.co.uk) 

Business Linux 

N/A 

£45 

4.000MB 

4.000MB 

4.000 

✓ 

✓ 

/ 

✓ 


✓ 

/ 

Bravo14 (http://bravo14.co.uk) 

Business Windows 

N/A 

£45 

4,000MB 

4.000MB 

4,000 

/ 

✓ 

/ 

/ 


✓ 

/ 

Bravo14 (http://bravo14.co.uk) 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 

/ 

/ 


✓ 

/ 

Bravo14 (http://bravo14.co.uk) 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 


✓ 

/ 

Daily Internet (www.daily.co.uk) 

Entry 

0845 466 2100 

£19.28 

500MB 

5GB 

75 

✓ 


✓ 


✓ 

/ 

✓ 

Daily Internet (www.daily.co.uk) 

Home 

0845 466 2100 

£50.90 

3GB 

30GB 

30 

✓ 

✓ 

/ 


✓ 

✓ 

✓ 

Daily Internet (www.daily.co.uk) 

Business 

0845 466 2100 

£53.94 

12GB 

150GB 

600 

/ 

/ 

✓ 


✓ 

✓ 

✓ 

Daily Internet (www.daily.co.uk) 

Business Plus 

0845 466 2100 

£77.94 

24GB 

250GB 

Unlimited 

/ 

✓ 

/ 


/ 

✓ 

✓ 

Designwasp (http://designwasp.com) 

Starter 

08443729848 

£30 

3GB 

20GB 

1.000 

/ 

✓ 


✓ 


✓ 

✓ 

Designwasp (http://designwasp.com) 

Home 

0844 372 9848 

£40 

10GB 

50GB 

10.000 

/ 

/ 


/ 


/ 

/ 
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Get your listing highlighted! Contact Richard 


O richard.rust@imagine-publishing.co.uk 
0+44(0)1202586436 


hosting listings 


Featured host of the month: Blackf oot Hosting www.blackfoot.co.uk 

Offering more reasons for choosing one of the listed providers 

Blackfoot is an experienced UK-based web-hosting provider and first-class delivery. Hosting options are available in five flavours 

with a proven pedigree in offering hosting and domain name ranging from the entry-level Home solution for £40 per year, up to 

registration services since 1999. Specialising in Linux-based the powerful eCommerce, Professional and Partner packages priced 

servers, housed across three London data centres, Blackfoot promises between £100-200. All come with access to the feature-packed cPanel 

24/7 monitoring and a dedicated support team to guarantee uptime control panel for intuitive maintenance. 



NAME AND URL 



Designwasp (http://designwasp.com) 

Business 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 


✓ 


✓ 

✓ 


Designwasp (http://designwasp.com) 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


/ 


/ 

✓ 


Designwasp (http://designwasp.com) 

Windows Home 

0844 372 9848 

£40 

10GB 

50GB 

1.000 

/ 

✓ 


✓ 


/ 

✓ 


Designwasp (http://designwasp.com) 

CheapHost 

0844 372 9848 

£10 

300MB 

100MB 

5 




/ 



/ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal 

01865589 990 

£12 

1GB 

Unlimited 

10 

/ 



/ 

/ 

/ 

✓ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal Plus 

01865589 990 

£48 

Unlimited 

Unlimited 

50 

/ 



✓ 

/ 

/ 

✓ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business 

01865589 990 

£108 

5GB 

Unlimited 

1000 

/ 

/ 


✓ 

✓ 

✓ 

✓ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business Professional 

01865 589 990 

£132 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 


/ 

✓ 

✓ 

✓ 


Domaincheck (www.domaincheck.co.uk) 

Bronze Linux 

0191 2612252 

£30 

100MB 

1GB 

5 


✓ 

/ 

✓ 

✓ 

✓ 

/ 

✓ 

Domaincheck (www.domaincheck.co.uk) 

Gold Linux 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

/ 

/ 

/ 

/ 

✓ 

✓ 

✓ 

Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

0191 2612252 

£30 

100MB 

1GB 

5 


/ 

✓ 

/ 

/ 

✓ 

✓ 

/ 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

/ 

/ 

/ 

✓ 

/ 

✓ 

✓ 

Donhost (www.donhost.co.uk) 

Reseller Unix 

0845 226 5566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

/ 


✓ 

✓ 

✓ 

✓ 

/ 


Donhost (www.donhost.co.uk) 

Reseller Windows 

0845 226 5566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

✓ 

✓ 

✓ 

✓ 


Donhost (www.donhost.co.uk) 

Enterprise 

0845 226 5566 

£89.99 

1GB 

2GB 

250 

/ 


/ 

✓ 

✓ 

✓ 

✓ 


Donhost (www.donhost.co.uk) 

Commerce 

0845 226 5566 

£179.99 

2GB 

5GB 

500 

/ 


/ 

/ 

/ 

✓ 

✓ 


Donhost (www.donhost.co.uk) 

Designer 

0845 226 5566 

£119.99 

1GB 

2GB 

250 

/ 


/ 

✓ 

✓ 

/ 

✓ 


Donhost (www.donhost.co.uk) 

Developer 

0845 226 5566 

£259.99 

2GB 

5GB 

500 

/ 


✓ 

✓ 

✓ 

✓ 

/ 


eHosting (www.ehosting.com) 

Starter 

0844 999 4100 

£23.88 

1GB 

25GB 

10 






✓ 

✓ 

✓ 

eHosting (www.ehosting.com) 

Personal 

0844 999 4100 

£59.88 

2.5GB 

Unlimited 

50 

/ 





/ 

✓ 

✓ 

eHosting (www.ehosting.com) 

Expert 

0844 999 4100 

£95.88 

5GB 

Unlimited 

250 

/ 





✓ 

✓ 

/ 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

/ 




/ 

✓ 

✓ 

/ 

Equiphase (www.equiphase.net) 

Bronze 

0121 314 4865 

£30 

200MB 

2GB 

10 

/ 

/ 


✓ 


✓ 

✓ 

✓ 

Equiphase (www.equiphase.net) 

Silver 

0121314 4865 

£42 

400MB 

5GB 

20 

/ 

✓ 


✓ 


/ 

✓ 

✓ 

Equiphase (www.equiphase.net) 

Gold 

0121 314 4865 

£72 

800MB 

10GB 

100 

/ 

✓ 


✓ 


✓ 

✓ 

✓ 

Equiphase (www.equiphase.net) 

Platinum 

0121314 4865 

£114 

1,200MB 

40GB 

200 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

Eurofasthost.com (www.eurofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 



✓ 

✓ 

✓ 

✓ 

✓ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 



/ 

✓ 

✓ 

/ 

✓ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249823 

£140 

5GB 

10GB 

25 

/ 

✓ 

✓ 

✓ 

✓ 

/ 

/ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

/ 

✓ 

✓ 

✓ 


✓ 

✓ 

✓ 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

/ 

✓ 

/ 

/ 


✓ 

✓ 

✓ 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

✓ 


✓ 

✓ 

✓ 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 


✓ 

✓ 

✓ 


Personal Standard 

0844 5830777 

£53.88 

5GB 

Unlimited 

500 

/ 

X 

/ 

/ 

✓ 

/ 

/ 

X 


Business Standard 

0844 5830777 

£95.88 

25GB 

Unlimited 

1,000 

/ 

Option 

/ 

/ 

/ 

/ 

/ 

X 


Business Premium 

0844 5830777 

£173.88 

50GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

Fasthosts 

WD Starter Reseller 

0844 5830777 

£149.99 

20GB 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 

www.fasthosts.co.uk 

Advanced Reseller 

0844 5830777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 


Giacom (www.giacom.com) 

Business Pro 

0800542 7500 

£199 

100MB 

2GB 

100 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 644 7750 

£29.80 

2.5GB 

10GB 

1.000 




/ 



✓ 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

08456447750 

£89.99 

10GB 

50GB 

10,000 

/ 

✓ 


/ 


✓ 

✓ 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

✓ 

✓ 


✓ 


✓ 

✓ 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

08456447750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 


✓ 

✓ 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 


Option 

/ 

/ 


/ 

✓ 

Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

/ 

Option 

/ 

/ 

/ 

/ 

✓ 

Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

/ 

Option 

✓ 

✓ 

✓ 

✓ 

✓ 

Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

/ 

Option 

✓ 

✓ 

/ 

✓ 

✓ 

Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

/ 

Option 

✓ 

✓ 

/ 

✓ 

✓ 

Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

✓ 


✓ 

✓ 

ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

/ 

option 

/ 

/ 

✓ 

/ 

ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

✓ 

option 

✓ 

✓ 

✓ 

/ 

ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

/ 

✓ 

option 

✓ 

✓ 

/ 

/ 

ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

/ 

✓ 

option 

✓ 

✓ 

✓ 

✓ 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

• Unlimited websites • Use your own brand throughout 

• Unlimited bandwidth • 24/7 expert UK-based support 

• Unlimited web space • No risk trial - 3 months free 


I Hosting listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 

Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

O +44(0)1202586436 

Continued-. 


NAME AND URL 



ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

/ 

/ 

option 

/ 

✓ 

/ 

y 


ICUK www.icukhosting.co.uk 

Enterprise Plus 

0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

/ 

/ 

option 

✓ 

✓ 

/ 

y 


ICUK www.icukhosting.co.uk 

Reseller Windows 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

option 

✓ 

✓ 

/ 

y 


ICUK www.icukhosting.co.uk 

Reseller Linux 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

option 

✓ 

✓ 

/ 

y 


ICUK www.icukhosting.co.uk 

Reseller Enterprise 

0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

✓ 

/ 

option 

✓ 

✓ 

y 

y 


JAB Web Hosting (www.jabwebhosting.com) 

Mail - M105 

0800 043 0153 

£15.17 

256MB 

3GB 

50 




/ 

✓ 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Home - H25 

0800 043 0153 

£24.47 

1GB 

8GB 

50 

/ 



✓ 

/ 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Professional - P55 

0800 043 0153 

£45 

2GB 

15GB 

75 

/ 

/ 


✓ 

✓ 

y 

y 

y 

JAB Web Hosting (www.jabwebhostlng.com) 

Reseller - R25 

0800 043 0153 

£97.88 

2GB 

30GB 

250 

/ 

/ 


✓ 

✓ 

y 

y 

y 

JAB Web Hosting (www.jabwebhosting.com) 

Reseller - R105 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

/ 

/ 


/ 

/ 

y 

y 

y 

LCN (www.lcn.com) 

Blog 

01438342 490 

£20 

100MB 

1GB 

5 



/ 

✓ 

✓ 

y 

y 

y 

LCN (www.lcn.com) 

Starter 

01438342 490 

£30 

1GB 

1GB 

10 



✓ 

✓ 

/ 

y 

y 

y 

LCN (www.lcn.com) 

Starter 

01438342 490 

£30 

1GB 

1GB 

10 



✓ 

/ 

/ 

y 

y 

y 

LCN (www.lcn.com) 

Dynamic 

01438342 490 

£50 

2GB 

2GB 

20 

/ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

LCN (www.lcn.com) 

Premium 

01438342 490 

£80 

5GB 

5GB 

50 

/ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

LCN (www.lcn.com) 

Unlimited 

01438342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

LD Hosts (http://ldhosts.co.uk) 

LD Budget (Linux) 

07891235858 

£11.88 

1GB 

1GB 

500 

/ 

/ 


✓ 

✓ 

y 

y 


LD Hosts (http://ldhosts.co.uk) 

LDHome (Linux) 

07891235858 

£23.88 

10GB 

10GB 

5.000 

✓ 

/ 


✓ 

✓ 

y 

y 


LD Hosts (http://ldhosts.co.uk) 

LD Pro (Linux) 

07891235858 

£41.88 

50GB 

50GB 

20.000 

/ 

/ 


✓ 

✓ 

y 

y 


LD Hosts (http://idhosts.co.uk) 

LD Unlimited (Linux) 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 

/ 

y 

y 


LD Hosts (http://ldhosts.co.uk) 

Windows Home 

07891235858 

£17.88 

2GB 

2GB 

1.000 

/ 

/ 


✓ 

✓ 

y 

y 


LD Hosts (http://ldhosts.co.uk) 

Windows Unlimited 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 

✓ 

y 

y 


Media Temple (http://mediatemple.net) 

Shared-Server Pro 

+1 310 841 5500 

£64 

2GB 

1TB 

1.000 

✓ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

Media Temple (http://mediatemple.net) 

Shared-Server Advanced 

+1310 841 5500 

£109 

5GB 

1.5TB 

5.000 

/ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

NameHog (www.namehog.net) 

Starter 

01604 212904 

£37.08 

10GB 

100GB 

Unlimited 



✓ 

✓ 

✓ 

y 

y 

y 

NameHog (www.namehog.net) 

Home Pro 

01604212904 

£62.28 

25GB 

500GB 

Unlimited 

✓ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

NameHog (www.namehog.net) 

Business 

01604212904 

£103.08 

75GB 

Unlimited 

Unlimited 

/ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

NameHog (www.namehog.net) 

Reseller 

01604 212904 

£103.08 

100GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

Namesco (www.names.co.uk) 

Startup Plus 

08453633632 

£89.99 

500MB 

5GB 

10 

/ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

Namesco (www.names.co.uk) 

Business 

08453633632 

£149.99 

2,000MB 

20GB 

100 



✓ 

✓ 

✓ 

y 

y 

y 

Namesco (www.names.co.uk) 

Business Plus 

0845 363 3632 

£89.99 

3,000MB 

30GB 

200 

/ 

/ 

✓ 

/ 

/ 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer 

08453633632 

£239.88 

1GB 

20GB 

200 

✓ 

/ 

/ 

✓ 

✓ 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

/ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

^ NerceTERH 

DEVELOPER 

08000612801 

£32.89 

1GB 

Unlimited 

500 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

ONE 

08000612801 

£109.99 

5GB 

Unlimited 

1000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

RESELLER 

08000612801 

£274.89 

Unlimited 

Unlimited 

1000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netcetera www.netcetera.co.uk 

VM500 Server 

08000612801 

£300 

20GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


2200DC Server 

08000612801 

£720 

160GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


3000DC Server 

08000612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 


2600QC Server 

08000612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1.000 

10GB 

10GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3.000+ 

73GB+ 

1.500GB 

100+ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 



✓ 

✓ 


/ 

y 


PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 



✓ 

✓ 


/ 

y 


PurplePaw (www.purplepaw.co.uk) 

Plus 

N/A 

£65 

750MB 

5GB 

25 

/ 

/ 

/ 

✓ 


/ 

y 


PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

/ 

/ 

✓ 

✓ 


/ 

y 


PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

✓ 

✓ 

/ 

✓ 


y 

y 


Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843 289 4625 

£18 

1GB 

Unlimited 

10 

/ 


/ 

/ 

✓ 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

/ 

/ 

/ 

✓ 

/ 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

0843 289 4625 

£107.88 

100GB 

Unlimited 

Unlimited 

✓ 

/ 

✓ 

✓ 

✓ 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

/ 


✓ 

✓ 

✓ 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 3217788 

£69 

20MB 

2GB 

1 

/ 


/ 

✓ 

✓ 

y 

y 

y 
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In association with 


fasthosts 


Can you 
recommend 
your host? 

Tweet us today with your 
hosting comments and advice 

@WebDesignerMag 


NAME AND URL 


Get your listing highlighted! Contact Richard 



Skymarket (www.skymarket.co.uk) 

Premium 1 

0800 3217788 

£99 

25MB 

2GB 

i 

/ 


/ 

/ 

✓ 

✓ 

✓ 

/ 

Skymarket (www.skymarket.co.uk) 

Premium 2 

0800 3217788 

£149 

50MB 

2GB 

i 

/ 


/ 

✓ 

✓ 

/ 

✓ 

✓ 

STRAT0 Hosting (www.strato-hosting.co.uk) 

STRATO BasicWeb 

00800 8007 0070 

£48 

2GB 

Unlimited 

1,000 



/ 

✓ 

✓ 

✓ 

✓ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO PowerWeb 

00800 8007 0070 

£72 

6GB 

Unlimited 

2,000 

/ 


✓ 

/ 

/ 

✓ 

✓ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO AdvancedWeb 

00800 8007 0070 

£120 

20GB 

Unlimited 

4,000 

/ 


/ 

✓ 

✓ 

✓ 

✓ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO EnterpriseWeb 

00800 8007 0070 

£180 

50GB 

Unlimited 

6,000 

/ 


/ 

✓ 

✓ 

✓ 

/ 


Streamline.net (www.streamline.net) 

Trial (3 month) 

0844 9411000 

N/A 

10GB 

Unlimited 

1.000 

/ 

Option 

/ 

✓ 

✓ 

✓ 

✓ 


Streamline.net (www.streamline.net) 

Starter 

0844 9411000 

£23.88 

500MB 

Unlimited 

20 

/ 

Option 

/ 

✓ 

✓ 

✓ 

✓ 


Streamline.net (www.streamline.net) 

Personal 

0844 9411000 

£41.88 

3GB 

Unlimited 

500 

/ 

Option 

/ 

/ 

✓ 

✓ 

/ 


Streamline.net (www.streamline.net) 

Plus 

0844 9411000 

£71.88 

10GB 

Unlimited 

1.000 

/ 

Option 

/ 

✓ 

✓ 

✓ 

✓ 


Streamline.net (www.streamline.net) 

Multisite 

0844 9411000 

£137.88 

20GB 

Unlimited 

Unlimited 

/ 

Option 

/ 

✓ 

✓ 

✓ 

✓ 


Swish Hosting (www.swishhosting.co.uk) 

Email 

08445 67 69 71 

£18 


Unlimited 

Unlimited 



/ 

✓ 

/ 

✓ 

✓ 

✓ 

Swish Hosting (www.swishhosting.co.uk) 

Windows Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

Swish Hosting (www.swishhosting.co.uk) 

Linux Hosting 

08445 6769 71 

£66 


Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

Swish Hosting (www.swishhosting.co.uk) 

eCommerce 

08445 6769 71 

£90 


Unlimited 

Unlimited 

/ 

/ 

/ 

✓ 

/ 

✓ 

✓ 

/ 

Swish Hosting (www.swishhosting.co.uk) 

SiteBuilder 

08445 6769 71 

£12 


Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

Switch Media (www.switchmedia.com) 

Switch Standard 

0151236 9111 

£159 

1GB 

50GB 

500 

/ 




✓ 

✓ 



Switch Media (www.switchmedia.com) 

Switch Business 

0151 236 9111 

£249 

10GB 

150GB 

1500 

/ 




/ 

/ 

/ 


Switch Media (www.switchmedia.com) 

Business Pro 

0151236 9111 

£348.96 

20GB 

300GB 

5000 

✓ 




✓ 

✓ 

✓ 


thename.co.uk (www.thename.co.uk) 

Parking 

0870 765 6364 

£52.88 

25MB 

500MB 

15 

/ 

/ 

/ 

/ 

/ 

✓ 

/ 


thename.co.uk (www.thename.co.uk) 

Forwarding 

0870 765 6364 

From £15 

N/A 

500MB 

N/A 



/ 

✓ 

/ 

/ 

/ 


thename.co.uk (www.thename.co.uk) 

Hosting 

0870 765 6364 

From £7.50 

N/A 

N/A 

N/A 




✓ 

✓ 

✓ 

✓ 


TwentyHost (www.twentyhost.co.uk) 

Basic5S 

0845 6410776 

£24 

100MB 

1,500MB 

25 

/ 

✓ 

/ 

✓ 

✓ 

/ 

✓ 

✓ 

TwentyHost (www.twentyhost.co.uk) 

StandardSS 

0845 6410776 

£45 

200MB 

3.000MB 

50 

✓ 

✓ 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

TwentyHost (www.twentyhost.co.uk) 

BusinessSS 

0845 6410776 

£70 

500MB 

7,500MB 

100 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

✓ 

TwentyHost (www.twentyhost.co.uk) 

AdvancedSS 

0845 6410776 

£110 

1,000MB 

15.000MB 

200 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

/ 

✓ 

VARiHOST (www.varihost.net) 

WordPress Basic 

0208144 7057 

£47.88 

2GB 

10GB 

10 

✓ 



✓ 

✓ 

/ 

/ 

✓ 

VARiHOST (www.varihost.net) 

WordPress Plus 

0208144 7057 

£71.88 

4GB 

100GB 

100 

/ 

/ 


✓ 

/ 

/ 

✓ 

✓ 

VARiHOST (www.varihost.net) 

WordPress Extra 

0208144 7057 

£119.88 

unlimited 

Unlimited 

Unlimited 

/ 

✓ 


✓ 

✓ 

/ 

✓ 

✓ 

WebFusion (www.webfusion.co.uk) 

Fusion Professional 

08451301602 

£107.40 

5GB 

50GB 

1,000 

/ 


✓ 

/ 

/ 

/ 

✓ 


WebFusion (www.webfusion.co.uk) 

Fusion Business 

08451301602 

£179.40 

10GB 

150GB 

1,500 

/ 


/ 

✓ 

✓ 

✓ 

✓ 


WebFusion (www.webfusion.co.uk) 

Fusion Developer 

08451301602 

£227.40 

20GB 

300GB 

5.000 

/ 


/ 

✓ 

/ 

/ 

/ 


WebFusion (www.webfusion.co.uk) 

Fusion Reseller 

08451301602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

✓ 

✓ 

/ 

✓ 


Web Wiz (www.webwiz.co.uk) 

Windows Starter 

0844 3581450 

£69.95 

1GB 

25GB 

100 

/ 

/ 

/ 

✓ 

/ 

✓ 

✓ 

/ 

Web Wiz (www.webwiz.co.uk) 

Windows Professional 

08443581450 

£149.95 

4GB 

100GB 

500 

/ 

✓ 

/ 

✓ 

/ 

/ 

/ 

/ 

Web Wiz (www.webwiz.co.uk) 

Windows Starter Reseller 

0844 3581450 

£199.95 

5GB 

25GB 

500 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

✓ 

Web Wiz (www.webwiz.co.uk) 

Windows Business Reseller 

0844 3581450 

£499.95 

20GB 

200GB 

5,000 

/ 

/ 

/ 

/ 

/ 

/ 

✓ 

/ 

Zebra Internet (www.zebrainternet.com) 

Starter Pro 

N/A 

£10.99 

5GB 

40GB 

50 

/ 


/ 

✓ 


/ 

✓ 

✓ 

Zebra Internet (www.zebrainternet.com) 

Business Pro 

N/A 

£46.99 

10GB 

80GB 

500 

/ 

/ 

/ 

/ 


/ 

✓ 

✓ 

Zebra Internet (www.zebrainternet.com) 

Ultimate Pro 

N/A 

£79.99 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 

✓ 

✓ 


✓ 

✓ 

/ 

IV. 

Bronze (Linux) 

08450589000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Silver (Linux) 

08450589000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

r r7yT: 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Platinum (Linux) 

08450589000 

£239.88 

50GB 

250GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Reseller (Linux) 

08450589000 

£479.88 

150GB 

500GB 

250 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Designer (Windows) 

08450589000 

£59.88 

2GB 

20GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

08450589000 

£179.88 

10GB 

100GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 

Fantastic 
customer support 



The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 



Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 



Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up, monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 



If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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uueb designer 


Bandwidth Limit Exceeded 

This advertisement is too popular and cannot be displayed 
due to reaching its bandwidth limit. 

Please try again later. 


Don’t let this happen to your website with UNLIMITED TRAFFIC for 
as little as £2.50 per month (inc VAT) at www.111webhost.com 



"ill WebHostir 


Give your website a good home 






classified advertising 01202 586436 


UNMISSABLE 

DOMAIN OFFERS 

With more than 6.4 million contracts worldwide, 1&1 is a leading web host and domain 
registrar. 1&1 is a recognised partner of most of the world's largest Internet registries. 

We can offer you a wide range of domain extensions, including .co.uk, .info, .biz and .eu. 
Register your domain name with 1&1 today and benefit from our unmissable domain offers! 



Included with every domain: 

✓ DNS Management ✓ Masked URL Forwarding ✓ Domain Contact Management ✓ 1&1 WebsiteBuilder 


SECURE YOUR DOMAIN NAME TODAY! 1 O'| 


united 


Call 0844 335 1211 or buy online www.1and1.CO.uk 


* Discount applies for the first year of registration only. The second year and subsequent years will be charged at the standard prices. Visit www.landl.co.uk for full promotional offer details, terms and conditions. 
Prices exclude VAT. 









ill 0 b designer 


Read anything 
good lately? 


Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 



MAGAZINES BOOKS DVDS DOWNLOADS GIFTS 



Everything you need to work better 
online from Fasthosts 

That’s not just a web-hosting package, a domain name, a virtual or 
dedicated server, broadband, hosted email or online backup. It’s a 
service your business can rely on. 

You’ll get award-winning technology, but you’ll also have the support 

of people who can help you work better online. If you need to call us, 
you’ll find our team of IT experts happy and eager to help. It all adds up 
to a service your business can rely on. 

Plus, with up to 70% off selected products there’s no better time 
to buy. 

Find out how your business can work better online 

call free on 0800 6520 444 or visit www.fasthosts.co.uk 


— 11 1 TM 

fasthosts 

hosting | domains | dedicated &virtual servers | reseller hosting | online backup 



nop< eerTefcONWfc 

W <TH 

RjEUAWfc 

{emuas 


C 2012 All rights reserved Mb! hosts and the Fasthosts logo ar* trademarks of Fast hosts Internal Ltd 
••offer subject to a minimum 1 2 month contract Terms & Condtfions apply see websrte fcr details. 








classified advertising 01202 586436 





PostcodeAnywhere 

The easiest way to add features to your website. 

UK & international addressing | Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out more: 

Call: 0800 047 0495 
www.postcodeanywhere.com 




trade secret 

noun {c} ~tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 + vat ^ 

Eliminate spelling mistakes ^ 

4 Reduced abandoned carts + 


80% reduction of keystrokes entering addresses 
Create a professional image for your clients 
Simple integration with SDK & working examples 


For more details visit postcode-software.net or call 0845 8382 666 




MB HOSTING 
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100m b 

SOOmb 

2,000m b 

1GB 

5GB 

20GB 

£25 

£50 

£150 

cPanel Accelerated & Softaculous Script Library 

Business Level User & Server Support Package 


Relax 

We take care of the server, leaving you 
free to focus on building websites. 

... mi y® u re in Control 
We II provide all the tools you need to 
etup and manage your websites. 

We're Here to Help 

Our team will provide support to you and 

your colleagues when you need it most. 


1 

9 u °te cou 0 pon r cod ay and 
Tor 20% nff 6 WD20 





























disc pages 




This disc 
is worth 
more than 




£50 


Your free,. 
resource disc 



Welcome to the Web 
Designer cover disc, a 
feature-packed CD 
containing a must-have 
selection of design 
resources and tutorials 

Once again Web Designer has 
scoured the web and beyond 
looking for the best range of 
designer resources out there. The 
latest lineup includes a premium 
WordPress theme - Wave. 24 
meteorological vectors, 
photorealistic T-shirt templates, 
the psychedelic Action Is font and 
over an hour of video tuition. 


WordPress Wave 
portfolio theme 

From themeforest.net 

WordPress Wave is a clean and crisp premium 
theme developed and built by The Molitor. 

The theme incorporates a featured image 
slider and specific category posts that are 
neatly stacked with accompanying 
thumbnails. The theme is coded with HTML5 
techniques, has a super-easy-to-use admin 
panel and features jQuery animations and a 
slideshow with a selection of 11 effects. 




30 

music loops 
and sound FX 

Soundsnap (www. 
soundsnap.com) 

provides an essential 
series of music and FX 
clips for your projects 

24 

CSS3 sites 

This month’s Design 
Cloud brings together a 
collection of beautifully 
crafted sites that 
implement CSS3 



tutorial files 

All the code and assets 
needed to complete 
this issue's workshops 


Load the CD: 

Microsoft Windows 


We support Windows 7 unless 
otherwise stated. The CD-ROM should 
autorun once placed into your disc 
drive. If not, follow these instructions: 

I Browse to 
My Computer. 

I Right-click on 
your CD drive, and 
select Open from the 
drop-down list. 

I Read the ‘readme.txt’ if 
there is one present to 
find out which files you 
need to launch to run 
the interface. 


Load the CD: 

Mac OS X 

Up to 05 X 10.7 (Lion) supported. 
This CD-ROM interface will NOT 
autorun when placed into your CD 
drive. Instead: 



Double-click the CD 
icon on your desktop. 
Read the ‘readme’ file if 
there is one present to 
find out which file you 
require to successfully 
run the interface. 
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What would you like to see featured on your free CD?0 webdesigner@imagine-publishing.co.uk 



24 weather 
vectors 

From .wwwjn a p2obje_dts.com 

The lovely people at Snap2objects have provided us with 
a couple of vector packs in the shape of Weather Kawaii 
and Weather Cast. These action-packed selections boast 
all the popular weather signs needed including rainy, 
sunny, snowy, plus a cute and cuddly family of clouds. 


@\BCD 


□ 


T-shirt 

templates 

FromThreadsnQtdead. 

com 

Threads Not Dead brings 
you a sample of its 
photorealistic T-shirt 
templates. These are perfect 
for T-shirt designers or those 
who want to try out their 
designs on a real-life apparel 
template. Stick designs on 
both the front and back. 



Action Is font 

The Brain Eaters Font Company 
takes us on a journey back to the 
psychedelic Sixties with the Action Is 
font. Re-create the opening credits to 
an Austin Powers film - or pay 
homage to the only Nelly Furtado 
album we’re able to remember. 

iMusic 

WordPress 

theme 

This professional music blog 
theme from newwpthemes. 
com features post thumbnail 
support comes widget 
ready, SEO optimised and 
compatible with the latest 
versions of WordPress. 

•t iMusic 



Disc problems 

If the menu doesn't run or your disc is 
faulty, we will replace it free of charge 
Drop an email listing the problem to 
WDxtrahelp@imagine-publishing. 
co.uk. Please don’t send mail about the 
disc to the editorial team. If you are 
having problems getting the best out 
of programs or extras provided, then 
please contact the relevant vendor. 


minutes of HTML5, CSS3 and ActionScript video tutorials 



Flash visitor counters 

This one-off video tutorial covers setting 
up a table in MySQL, calling a PHP file 
from Flash, style customisation and 
using vector art. 

From www.cartoonsmart.com 



HTML5, CSS3 and jQuery 

The third part in the series offers a 
host of CSS videos that look at key 
CSS properties including border-radius, 
box shadow and text shadow. 

From www.killersites.com 


Find more free tutorial content at © www.webdesignermag.co.uk 
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Tabs 

A popular visual 
technique of the time 
was to use background 
images to create the 
illusion of an angled tab. 
The tab was typically a 
squire image with the 
angled backgrounds the 
same colour and shade 
as the title background. 


Tables 

Tables create the 
three-column layout for 
both the featured 
content at the top of the 
page and the additional 
content below. The titles 
use a background colour 
in each of the separate 
cells and borders around 
the initial table to create 
the content boundaries. 


time! 

Page size: 87 KB 


secondson 
a 56 kbps 
connection 


MSN 





msn 


You*ll b« smiztd at what you can find! 

»j hn TVs, gifts, ck>th«» and mort 


AUGUST 14 


Home Hotmail | Search 1 Shopping | Mone< 

A PP*1 Now* 


Web 

design 


Autos 

Back to School 

Business 

Careers 

City^Guides 

Entertainment 

Games 

Health 

House & Home 

Kids 

Learning & Research 

Love & Relationships 

Music & Radio 

News 

Pets £ Animals 

Sports 

Tech & Gadgets 

Travel 

Women 

MSN internet Access 


MSN Worth a Click 


Beach's premier vintage 



Image borders 

This is a simple technique that is still used 
today. However, before the popular use of CSS 
adding a border was done inline, ie border=1 


www.msn.com 


Back when Microsoft ruled the world, MSN was its lynchpin for delivering the 
latest news and company services, a tradition it continues to this day 


MSN, or The Microsoft Network as it was known 
in the mid-Nineties, is the software giant’s portal 
to news and services. As the web has grown, MSN 
has evolved to keep pace with new trends and 
technologies, making itself a presence in its field. 

Back at the beginning of the 21st century, MSN 
was a content-heavy, text-driven portal with a 


design and layout that was very typical of the day. 
Images were at a premium, colours were 
predominantly two-tone and three-column layouts 
were the ubiquitous choice. Behind the scenes, 
tables were the tool of preference to bring together 
the content, and the everyman font Arial added the 
final piece of the jigsaw. 



•i Images were at a premium, colours 
were predominantly two-tone and three- 
column layouts were ubiquitous if 
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# heart interne 


Create your own custom 





vCPU 


RAM 


HDD 



Fully scalable and customisable 

Your VPS specs can be modified on the 
fly to ensure you can meet any sudden 
changes in demand or popularity. 


VPS without compromises 

Affordable yet high-quality VPS hosting 
without compromise. We use branded 
Intel processors and Dell servers in our 
UK data centre. 


Advanced virtualisation technology 

KVM is the latest generation of virtualisation 
technology, offering high-performance 
access to server resources for both Linux and 
Windows virtual private servers. 



From only £11.99 per month 


✓ 24/7 UK Support 


/ Free & Instant Setup 


✓ 99.99% Uptime SLA 


/ Full root access 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 


# heart internet 

www.heartinternet.co.uk 

Web hosting I Reseller hosting I VPS I Servers 


Puce excludes VAT at 20% 












KiranaTama 

a RoR outsourcing company 


With years of experience, 100+ projects, and more than 
100 developers, we are a professionally-run outsourcing company. 
We are experts in custom-developing web applications using 

RoR + HTML5 + CSS3. 
You know the power of HTML5 and the possibilities it creates for 
your product, and you need a reliable partner, 
us to book your first reliable offshore programming services. 


| Email: info@kiranatama.com 


Get ready 
for the future! 

GRAB your 
own <HTML> 5 
Web now! 



KiranaTama is our secret weapon. They are an invaluable resource for any 
start-up looking for high quality development at affordable prices. Time 
and time again, they go above and beyond in service and attention. 

I can throw any problem or question their way - multiple technologies, 
scaling and infrastructure., anything - and they will find a solution. 

My business simply would not exist without KiranaTama as a partner." 


TarynWestberg - "Founder & CEO of Glo (glosite.com)" 


-Client of KiranaTama- 


Q 
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